From 0289b0c1a2b9bec66cc5261c3c862a855d01d140 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Mon, 27 Apr 2020 10:39:18 +0300
Subject: [PATCH] UI: Get rid of 'multiple directives with 'exportAs' set to
 ngForm'

---
 .../components/alias/entity-alias-dialog.component.html  | 2 +-
 .../alias/entity-aliases-dialog.component.html           | 2 +-
 .../add-widget-to-dashboard-dialog.component.html        | 2 +-
 .../attribute/edit-attribute-value-panel.component.html  | 3 +--
 .../dashboard/select-target-layout-dialog.component.html | 2 +-
 .../dashboard/select-target-state-dialog.component.html  | 2 +-
 .../modules/home/components/details-panel.component.ts   | 8 ++++----
 .../components/entity/add-entity-dialog.component.ts     | 6 +++---
 .../components/entity/entity-details-panel.component.ts  | 6 +++---
 .../home/components/entity/entity-tabs.component.ts      | 4 ++--
 .../modules/home/components/entity/entity.component.ts   | 2 --
 .../import-export/import-dialog.component.html           | 2 +-
 .../components/relation/relation-dialog.component.html   | 2 +-
 .../widget/action/widget-action-dialog.component.html    | 2 +-
 .../widget/data-key-config-dialog.component.html         | 4 ++--
 .../widget/lib/multiple-input-widget.component.html      | 5 ++---
 .../widget/lib/multiple-input-widget.component.ts        | 9 ++++-----
 .../add-entities-to-customer-dialog.component.html       | 6 +++---
 .../dialogs/assign-to-customer-dialog.component.html     | 6 +++---
 .../home/pages/admin/general-settings.component.html     | 4 ++--
 .../modules/home/pages/admin/mail-server.component.html  | 6 +++---
 .../home/pages/admin/security-settings.component.html    | 4 ++--
 .../app/modules/home/pages/asset/asset.component.html    | 2 +-
 .../modules/home/pages/customer/customer.component.html  | 2 +-
 .../pages/dashboard/add-widget-dialog.component.html     | 2 +-
 .../home/pages/dashboard/dashboard-form.component.html   | 2 +-
 .../home/pages/dashboard/dashboard-page.component.html   | 2 +-
 .../dashboard/dashboard-settings-dialog.component.html   | 2 +-
 .../home/pages/dashboard/edit-widget.component.html      | 2 +-
 .../home/pages/dashboard/edit-widget.component.ts        | 2 --
 .../manage-dashboard-layouts-dialog.component.html       | 2 +-
 .../manage-dashboard-customers-dialog.component.html     | 6 +++---
 .../states/dashboard-state-dialog.component.html         | 2 +-
 .../states/manage-dashboard-states-dialog.component.html | 2 +-
 .../device/device-credentials-dialog.component.html      | 6 +++---
 .../app/modules/home/pages/device/device.component.html  | 2 +-
 .../home/pages/entity-view/entity-view.component.html    | 2 +-
 .../pages/profile/change-password-dialog.component.html  | 4 ++--
 .../modules/home/pages/profile/profile.component.html    | 4 ++--
 .../pages/rulechain/add-rule-node-dialog.component.html  | 4 ++--
 .../rulechain/add-rule-node-link-dialog.component.html   | 2 +-
 .../pages/rulechain/rule-node-details.component.html     | 2 +-
 .../home/pages/rulechain/rule-node-details.component.ts  | 2 --
 .../home/pages/rulechain/rule-node-link.component.html   | 2 +-
 .../home/pages/rulechain/rule-node-link.component.ts     | 2 --
 .../home/pages/rulechain/rulechain-page.component.html   | 4 ++--
 .../home/pages/rulechain/rulechain.component.html        | 2 +-
 .../app/modules/home/pages/tenant/tenant.component.html  | 2 +-
 .../modules/home/pages/user/add-user-dialog.component.ts | 6 +++---
 .../src/app/modules/home/pages/user/user.component.html  | 2 +-
 .../widget/save-widget-type-as-dialog.component.html     | 6 +++---
 .../home/pages/widget/widgets-bundle.component.html      | 2 +-
 .../login/pages/login/create-password.component.html     | 2 +-
 .../app/modules/login/pages/login/login.component.html   | 2 +-
 .../pages/login/reset-password-request.component.html    | 2 +-
 .../login/pages/login/reset-password.component.html      | 2 +-
 .../dialog/node-script-test-dialog.component.html        | 2 +-
 57 files changed, 86 insertions(+), 97 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html b/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html
index 0731de4ce2..b7f0ff21fc 100644
--- a/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form #entityAliasForm="ngForm" [formGroup]="entityAliasFormGroup" (ngSubmit)="save()" style="min-width: 480px;">
+<form [formGroup]="entityAliasFormGroup" (ngSubmit)="save()" style="min-width: 480px;">
   <mat-toolbar color="primary">
     <h2>{{ (isAdd ? 'alias.add' : 'alias.edit') | translate }}</h2>
     <span fxFlex></span>
diff --git a/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html b/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html
index c0f22872eb..f817762f95 100644
--- a/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form #entityAliasesForm="ngForm" [formGroup]="entityAliasesFormGroup" (ngSubmit)="save()" style="width: 700px;">
+<form [formGroup]="entityAliasesFormGroup" (ngSubmit)="save()" style="width: 700px;">
   <mat-toolbar color="primary">
     <h2>{{ title | translate }}</h2>
     <span fxFlex></span>
diff --git a/ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.html b/ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.html
index ad85a91923..60fe5e30d7 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form #addWidgetForm="ngForm" [formGroup]="addWidgetFormGroup" (ngSubmit)="add()" style="min-width: 400px;">
+<form [formGroup]="addWidgetFormGroup" (ngSubmit)="add()" style="min-width: 400px;">
   <mat-toolbar color="primary">
     <h2 translate>attribute.add-widget-to-dashboard</h2>
     <span fxFlex></span>
diff --git a/ui-ngx/src/app/modules/home/components/attribute/edit-attribute-value-panel.component.html b/ui-ngx/src/app/modules/home/components/attribute/edit-attribute-value-panel.component.html
index a3547cd486..8e2264fae1 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/edit-attribute-value-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/edit-attribute-value-panel.component.html
@@ -15,8 +15,7 @@
     limitations under the License.
 
 -->
-<form #attributeForm="ngForm"
-      class="mat-elevation-z1"
+<form class="mat-elevation-z1"
       [formGroup]="attributeFormGroup" (ngSubmit)="update()" style="width: 400px; padding: 5px;">
   <fieldset [disabled]="isLoading$ | async">
     <tb-value-input
diff --git a/ui-ngx/src/app/modules/home/components/dashboard/select-target-layout-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard/select-target-layout-dialog.component.html
index 2f80b449ac..65075eae26 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard/select-target-layout-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard/select-target-layout-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form #widgetForm="ngForm">
+<form>
   <mat-toolbar color="primary">
     <h2 translate>layout.select</h2>
     <span fxFlex></span>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard/select-target-state-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard/select-target-state-dialog.component.html
index 16d82ab9b2..41ba893e57 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard/select-target-state-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard/select-target-state-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form #stateForm="ngForm" [formGroup]="stateFormGroup" (ngSubmit)="save()">
+<form [formGroup]="stateFormGroup" (ngSubmit)="save()">
   <mat-toolbar color="primary">
     <h2 translate>dashboard.select-state</h2>
     <span fxFlex></span>
diff --git a/ui-ngx/src/app/modules/home/components/details-panel.component.ts b/ui-ngx/src/app/modules/home/components/details-panel.component.ts
index 66a9f3dc82..1e1ecb8a97 100644
--- a/ui-ngx/src/app/modules/home/components/details-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/details-panel.component.ts
@@ -18,7 +18,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { NgForm } from '@angular/forms';
+import { FormGroup, NgForm } from '@angular/forms';
 
 @Component({
   selector: 'tb-details-panel',
@@ -33,14 +33,14 @@ export class DetailsPanelComponent extends PageComponent {
   @Input() isReadOnly = false;
   @Input() isAlwaysEdit = false;
 
-  theFormValue: NgForm;
+  theFormValue: FormGroup;
 
   @Input()
-  set theForm(value: NgForm) {
+  set theForm(value: FormGroup) {
     this.theFormValue = value;
   }
 
-  get theForm(): NgForm {
+  get theForm(): FormGroup {
     return this.theFormValue;
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.ts b/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.ts
index 2a39250872..871242c954 100644
--- a/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.ts
@@ -19,7 +19,7 @@ import { ErrorStateMatcher } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { FormControl, FormGroupDirective, NgForm } from '@angular/forms';
+import { FormControl, FormGroup, FormGroupDirective, NgForm } from '@angular/forms';
 import { EntityTypeResource, EntityTypeTranslation } from '@shared/models/entity-type.models';
 import { BaseData, HasId } from '@shared/models/base-data';
 import { EntityId } from '@shared/models/id/entity-id';
@@ -40,7 +40,7 @@ export class AddEntityDialogComponent extends
   DialogComponent<AddEntityDialogComponent, BaseData<HasId>> implements OnInit, ErrorStateMatcher {
 
   entityComponent: EntityComponent<BaseData<HasId>>;
-  detailsForm: NgForm;
+  detailsForm: FormGroup;
 
   entitiesTableConfig: EntityTableConfig<BaseData<HasId>>;
   translations: EntityTypeTranslation;
@@ -87,7 +87,7 @@ export class AddEntityDialogComponent extends
     const componentRef = viewContainerRef.createComponent(componentFactory, 0, injector);
     this.entityComponent = componentRef.instance;
     this.entityComponent.isEdit = true;
-    this.detailsForm = this.entityComponent.entityNgForm;
+    this.detailsForm = this.entityComponent.entityForm;
   }
 
   helpLinkId(): string {
diff --git a/ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.ts b/ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.ts
index 37f63ecebc..af70020946 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.ts
@@ -37,7 +37,7 @@ import { AppState } from '@core/core.state';
 import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
 import { BaseData, HasId } from '@shared/models/base-data';
 import { EntityType, EntityTypeResource, EntityTypeTranslation } from '@shared/models/entity-type.models';
-import { NgForm } from '@angular/forms';
+import { FormGroup, NgForm } from '@angular/forms';
 import { EntityComponent } from './entity.component';
 import { TbAnchorComponent } from '@shared/components/tb-anchor.component';
 import { EntityAction } from '@home/models/entity/entity-component.models';
@@ -68,7 +68,7 @@ export class EntityDetailsPanelComponent extends PageComponent implements OnInit
 
   entityTabsComponentRef: ComponentRef<EntityTabsComponent<BaseData<HasId>>>;
   entityTabsComponent: EntityTabsComponent<BaseData<HasId>>;
-  detailsForm: NgForm;
+  detailsForm: FormGroup;
 
   entitiesTableConfigValue: EntityTableConfig<BaseData<HasId>>;
   isEditValue = false;
@@ -189,7 +189,7 @@ export class EntityDetailsPanelComponent extends PageComponent implements OnInit
     this.entityComponentRef = viewContainerRef.createComponent(componentFactory, 0, injector);
     this.entityComponent = this.entityComponentRef.instance;
     this.entityComponent.isEdit = this.isEdit;
-    this.detailsForm = this.entityComponent.entityNgForm;
+    this.detailsForm = this.entityComponent.entityForm;
     this.subscriptions.push(this.entityComponent.entityAction.subscribe((action) => {
       this.entityAction.emit(action);
     }));
diff --git a/ui-ngx/src/app/modules/home/components/entity/entity-tabs.component.ts b/ui-ngx/src/app/modules/home/components/entity/entity-tabs.component.ts
index 41ba7420dc..ef81cef161 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entity-tabs.component.ts
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-tabs.component.ts
@@ -30,7 +30,7 @@ import { AuditLogMode } from '@shared/models/audit-log.models';
 import { DebugEventType, EventType } from '@shared/models/event.models';
 import { AttributeScope, LatestTelemetry } from '@shared/models/telemetry/telemetry.models';
 import { NULL_UUID } from '@shared/models/id/has-uuid';
-import { NgForm } from '@angular/forms';
+import { FormGroup, NgForm } from '@angular/forms';
 import { PageLink } from '@shared/models/page/page-link';
 
 @Directive()
@@ -94,7 +94,7 @@ export abstract class EntityTabsComponent<T extends BaseData<HasId>,
   }
 
   @Input()
-  detailsForm: NgForm;
+  detailsForm: FormGroup;
 
   private entityTabsSubject = new BehaviorSubject<Array<MatTab>>(null);
 
diff --git a/ui-ngx/src/app/modules/home/components/entity/entity.component.ts b/ui-ngx/src/app/modules/home/components/entity/entity.component.ts
index d98bcd3adf..b98f5a3b44 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entity.component.ts
+++ b/ui-ngx/src/app/modules/home/components/entity/entity.component.ts
@@ -35,8 +35,6 @@ export abstract class EntityComponent<T extends BaseData<HasId>,
 
   entityForm: FormGroup;
 
-  @ViewChild('entityNgForm', {static: true}) entityNgForm: NgForm;
-
   isEditValue: boolean;
 
   @Input()
diff --git a/ui-ngx/src/app/modules/home/components/import-export/import-dialog.component.html b/ui-ngx/src/app/modules/home/components/import-export/import-dialog.component.html
index 3e35485b9b..e53ff360ca 100644
--- a/ui-ngx/src/app/modules/home/components/import-export/import-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/import-export/import-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form #importForm="ngForm" [formGroup]="importFormGroup" (ngSubmit)="importFromJson()">
+<form [formGroup]="importFormGroup" (ngSubmit)="importFromJson()">
   <mat-toolbar color="primary">
     <h2 translate>{{ importTitle }}</h2>
     <span fxFlex></span>
diff --git a/ui-ngx/src/app/modules/home/components/relation/relation-dialog.component.html b/ui-ngx/src/app/modules/home/components/relation/relation-dialog.component.html
index 85f0ae64c5..2d637c4066 100644
--- a/ui-ngx/src/app/modules/home/components/relation/relation-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/relation/relation-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form #relationForm="ngForm" [formGroup]="relationFormGroup" (ngSubmit)="save()" style="min-width: 600px;">
+<form [formGroup]="relationFormGroup" (ngSubmit)="save()" style="min-width: 600px;">
   <mat-toolbar fxLayout="row" color="primary">
     <h2>{{ (isAdd ? 'relation.add' : 'relation.edit' ) | translate }}</h2>
     <span fxFlex></span>
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html
index b3d56b9774..7bf068a4d0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form #widgetActionForm="ngForm" [formGroup]="widgetActionFormGroup" (ngSubmit)="save()" style="min-width: 480px;">
+<form [formGroup]="widgetActionFormGroup" (ngSubmit)="save()" style="min-width: 480px;">
   <mat-toolbar color="primary">
     <h2>{{ (isAdd ? 'widget-config.add-action' : 'widget-config.edit-action' ) | translate }}</h2>
     <span fxFlex></span>
diff --git a/ui-ngx/src/app/modules/home/components/widget/data-key-config-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/data-key-config-dialog.component.html
index 4b6908bc6f..f05c97f3d5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/data-key-config-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/data-key-config-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form #dataKeyForm="ngForm" [formGroup]="dataKeyFormGroup" (ngSubmit)="save()" style="min-width: 480px;">
+<form [formGroup]="dataKeyFormGroup" (ngSubmit)="save()" style="min-width: 480px;">
   <mat-toolbar color="primary">
     <h2>{{ 'datakey.configuration' | translate }}</h2>
     <span fxFlex></span>
@@ -39,7 +39,7 @@
   <div mat-dialog-actions fxLayoutAlign="end center">
     <button mat-raised-button color="primary"
             type="submit"
-            [disabled]="(isLoading$ | async) || dataKeyForm.invalid || !dataKeyForm.dirty">
+            [disabled]="(isLoading$ | async) || dataKeyFormGroup.invalid || !dataKeyFormGroup.dirty">
       {{ 'action.save' | translate }}
     </button>
     <button mat-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
index 10bc9881a9..659a8156cb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
@@ -16,7 +16,6 @@
 
 -->
 <form #formContainer class="tb-multiple-input"
-      #multipleInputForm="ngForm"
       [formGroup]="multipleInputFormGroup"
       tb-toast toastTarget="{{ toastTargetId }}"
       (ngSubmit)="save()" novalidate autocomplete="off">
@@ -103,12 +102,12 @@
          *ngIf="entityDetected && settings.showActionButtons">
       <button mat-button color="primary" type="button"
               (click)="discardAll()" style="max-height: 50px; margin-right:20px;"
-              [disabled]="!multipleInputForm.dirty">
+              [disabled]="!multipleInputFormGroup.dirty">
         {{ 'action.undo' | translate }}
       </button>
       <button mat-button mat-raised-button color="primary" type="submit"
                  style="max-height: 50px; margin-right:20px;"
-                 [disabled]="!multipleInputForm.dirty || multipleInputForm.invalid">
+                 [disabled]="!multipleInputFormGroup.dirty || multipleInputFormGroup.invalid">
         {{ 'action.save' | translate }}
       </button>
     </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
index d3912e0a76..01adeacdce 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
@@ -27,7 +27,7 @@ import { IWidgetSubscription } from '@core/api/widget-api.models';
 import { isDefined, isEqual, isUndefined } from '@core/utils';
 import { EntityType } from '@shared/models/entity-type.models';
 import * as _moment from 'moment';
-import { FormBuilder, FormGroup, NgForm, ValidatorFn, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms';
 import { RequestConfig } from '@core/http/http-utils';
 import { AttributeService } from '@core/http/attribute.service';
 import { AttributeData, AttributeScope, LatestTelemetry } from '@shared/models/telemetry/telemetry.models';
@@ -90,7 +90,6 @@ interface MultipleInputWidgetSource {
 export class MultipleInputWidgetComponent extends PageComponent implements OnInit, OnDestroy {
 
   @ViewChild('formContainer', {static: true}) formContainerRef: ElementRef<HTMLElement>;
-  @ViewChild('multipleInputForm', {static: true}) multipleInputForm: NgForm;
 
   @Input()
   ctx: WidgetContext;
@@ -453,7 +452,7 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
     if (tasks.length) {
       forkJoin(tasks).subscribe(
         () => {
-          this.multipleInputForm.resetForm();
+          this.multipleInputFormGroup.reset(undefined, {emitEvent: false});
           this.multipleInputFormGroup.markAsPristine();
           if (this.settings.showResultMessage) {
             this.ctx.showSuccessToast(this.translate.instant('widgets.input-widgets.update-successful'),
@@ -467,13 +466,13 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
           }
         });
     } else {
-      this.multipleInputForm.resetForm();
+      this.multipleInputFormGroup.reset(undefined, {emitEvent: false});
       this.multipleInputFormGroup.markAsPristine();
     }
   }
 
   public discardAll() {
-    this.multipleInputForm.resetForm();
+    this.multipleInputFormGroup.reset(undefined, {emitEvent: false});
     this.sources.forEach((source) => {
       for (const key of this.visibleKeys(source)) {
         this.multipleInputFormGroup.get(key.formId).patchValue(key.value, {emitEvent: false});
diff --git a/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html b/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html
index 9368219816..0b33828bc4 100644
--- a/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form #addEntitiesToCustomerForm="ngForm" [formGroup]="addEntitiesToCustomerFormGroup" (ngSubmit)="assign()">
+<form [formGroup]="addEntitiesToCustomerFormGroup" (ngSubmit)="assign()">
   <mat-toolbar color="primary">
     <h2>{{ assignToCustomerTitle | translate }}</h2>
     <span fxFlex></span>
@@ -42,8 +42,8 @@
   <div mat-dialog-actions fxLayoutAlign="end center">
     <button mat-raised-button color="primary"
             type="submit"
-            [disabled]="(isLoading$ | async) || addEntitiesToCustomerForm.invalid
-            || !addEntitiesToCustomerForm.dirty">
+            [disabled]="(isLoading$ | async) || addEntitiesToCustomerFormGroup.invalid
+            || !addEntitiesToCustomerFormGroup.dirty">
       {{ 'action.assign' | translate }}
     </button>
     <button mat-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html b/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html
index 8ad9a67ae7..5c98c02fa1 100644
--- a/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form #assignToCustomerForm="ngForm" [formGroup]="assignToCustomerFormGroup" (ngSubmit)="assign()">
+<form [formGroup]="assignToCustomerFormGroup" (ngSubmit)="assign()">
   <mat-toolbar color="primary">
     <h2>{{ assignToCustomerTitle | translate }}</h2>
     <span fxFlex></span>
@@ -41,8 +41,8 @@
   <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
     <button mat-raised-button color="primary"
             type="submit"
-            [disabled]="(isLoading$ | async) || assignToCustomerForm.invalid
-            || !assignToCustomerForm.dirty">
+            [disabled]="(isLoading$ | async) || assignToCustomerFormGroup.invalid
+            || !assignToCustomerFormGroup.dirty">
       {{ 'action.assign' | translate }}
     </button>
     <button mat-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html
index 242fb7540e..1bd8c60cc2 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html
@@ -26,7 +26,7 @@
     </mat-progress-bar>
     <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
     <mat-card-content style="padding-top: 16px;">
-      <form #generalSettingsForm="ngForm" [formGroup]="generalSettings" (ngSubmit)="save()">
+      <form [formGroup]="generalSettings" (ngSubmit)="save()">
         <fieldset [disabled]="isLoading$ | async">
           <mat-form-field class="mat-block">
             <mat-label translate>admin.base-url</mat-label>
@@ -36,7 +36,7 @@
             </mat-error>
           </mat-form-field>
           <div fxLayout="row" fxLayoutAlign="end center" style="width: 100%;" class="layout-wrap">
-            <button mat-button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || generalSettingsForm.invalid || !generalSettingsForm.dirty"
+            <button mat-button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || generalSettings.invalid || !generalSettings.dirty"
                     type="submit">{{'action.save' | translate}}
             </button>
           </div>
diff --git a/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html b/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html
index e87ccd3159..f2972687f5 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html
@@ -28,7 +28,7 @@
     </mat-progress-bar>
     <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
     <mat-card-content style="padding-top: 16px;">
-      <form #mailSettingsForm="ngForm" [formGroup]="mailSettings" (ngSubmit)="save()">
+      <form [formGroup]="mailSettings" (ngSubmit)="save()">
         <fieldset [disabled]="isLoading$ | async">
           <mat-form-field class="mat-block">
             <mat-label translate>admin.mail-from</mat-label>
@@ -97,10 +97,10 @@
           </mat-form-field>
           <div fxLayout="row" fxLayoutAlign="end center" fxLayout.xs="column" fxLayoutAlign.xs="end" fxLayoutGap="16px">
             <button mat-raised-button type="button"
-                    [disabled]="(isLoading$ | async) || mailSettingsForm.invalid" (click)="sendTestMail()">
+                    [disabled]="(isLoading$ | async) || mailSettings.invalid" (click)="sendTestMail()">
               {{'admin.send-test-mail' | translate}}
             </button>
-            <button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || mailSettingsForm.invalid || !mailSettingsForm.dirty"
+            <button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || mailSettings.invalid || !mailSettings.dirty"
                     type="submit">{{'action.save' | translate}}
             </button>
           </div>
diff --git a/ui-ngx/src/app/modules/home/pages/admin/security-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/security-settings.component.html
index b0b8b52dd7..df2184967d 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/security-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/security-settings.component.html
@@ -28,7 +28,7 @@
     </mat-progress-bar>
     <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
     <mat-card-content style="padding-top: 16px;">
-      <form #securitySettingsForm="ngForm" [formGroup]="securitySettingsFormGroup" (ngSubmit)="save()">
+      <form [formGroup]="securitySettingsFormGroup" (ngSubmit)="save()">
         <fieldset [disabled]="isLoading$ | async">
           <mat-expansion-panel [expanded]="true">
             <mat-expansion-panel-header>
@@ -140,7 +140,7 @@
             </section>
           </mat-expansion-panel>
           <div fxLayout="row" fxLayoutAlign="end center" style="width: 100%;" class="layout-wrap">
-            <button mat-button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || securitySettingsForm.invalid || !securitySettingsForm.dirty"
+            <button mat-button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || securitySettingsFormGroup.invalid || !securitySettingsFormGroup.dirty"
                     type="submit">{{'action.save' | translate}}
             </button>
           </div>
diff --git a/ui-ngx/src/app/modules/home/pages/asset/asset.component.html b/ui-ngx/src/app/modules/home/pages/asset/asset.component.html
index 7a9b65d82e..a78d55ef93 100644
--- a/ui-ngx/src/app/modules/home/pages/asset/asset.component.html
+++ b/ui-ngx/src/app/modules/home/pages/asset/asset.component.html
@@ -62,7 +62,7 @@
        [fxShow]="!isEdit && entity?.customerIsPublic && (assetScope === 'customer' || assetScope === 'tenant')">
     {{ 'asset.asset-public' | translate }}
   </div>
-  <form #entityNgForm="ngForm" [formGroup]="entityForm">
+  <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block">
         <mat-label translate>asset.name</mat-label>
diff --git a/ui-ngx/src/app/modules/home/pages/customer/customer.component.html b/ui-ngx/src/app/modules/home/pages/customer/customer.component.html
index a30e0acdd5..bb75d81fbd 100644
--- a/ui-ngx/src/app/modules/home/pages/customer/customer.component.html
+++ b/ui-ngx/src/app/modules/home/pages/customer/customer.component.html
@@ -58,7 +58,7 @@
   </div>
 </div>
 <div class="mat-padding" fxLayout="column">
-  <form #entityNgForm="ngForm" [formGroup]="entityForm">
+  <form [formGroup]="entityForm">
     <fieldset [fxShow]="!isPublic" [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block">
         <mat-label translate>customer.title</mat-label>
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/add-widget-dialog.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/add-widget-dialog.component.html
index 1b148c64ea..65f6900035 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/add-widget-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/add-widget-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form #widgetForm="ngForm" [formGroup]="widgetFormGroup" (ngSubmit)="add()" style="width: 900px;">
+<form [formGroup]="widgetFormGroup" (ngSubmit)="add()" style="width: 900px;">
   <mat-toolbar color="primary">
     <h2 translate>widget.add</h2>
     <span fxFlex></span>
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
index 6589e4f81c..4c8376e218 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
@@ -90,7 +90,7 @@
       </button>
     </div>
   </div>
-  <form #entityNgForm="ngForm" [formGroup]="entityForm">
+  <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block">
         <mat-label translate>dashboard.title</mat-label>
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.component.html
index 76a59242a9..1c35a09282 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.component.html
@@ -216,7 +216,7 @@
                           (closeDetails)="onEditWidgetClosed()"
                           (toggleDetailsEditMode)="onRevertWidgetEdit()"
                           (applyDetails)="saveWidget()"
-                          [theForm]="tbEditWidget.widgetForm">
+                          [theForm]="tbEditWidget.widgetFormGroup">
           <div class="details-buttons">
             <div [tb-help]="helpLinkIdForWidgetType()"></div>
           </div>
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-settings-dialog.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-settings-dialog.component.html
index 0227668842..41a3151d13 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-settings-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-settings-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form #settingsForm="ngForm" (ngSubmit)="save()">
+<form (ngSubmit)="save()">
   <mat-toolbar color="primary">
     <h2 translate>{{settings ? 'dashboard.settings' : 'layout.settings'}}</h2>
     <span fxFlex></span>
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/edit-widget.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/edit-widget.component.html
index 110fec0b3f..6dba30e6f2 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/edit-widget.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/edit-widget.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form #widgetForm="ngForm" [formGroup]="widgetFormGroup">
+<form [formGroup]="widgetFormGroup">
   <fieldset [disabled]="isLoading$ | async">
     <tb-widget-config
       [aliasController]="aliasController"
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/edit-widget.component.ts b/ui-ngx/src/app/modules/home/pages/dashboard/edit-widget.component.ts
index 38c49b9f16..28080091f7 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/edit-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/edit-widget.component.ts
@@ -49,8 +49,6 @@ export class EditWidgetComponent extends PageComponent implements OnInit, OnChan
   @Input()
   widgetLayout: WidgetLayout;
 
-  @ViewChild('widgetForm', {static: true}) widgetForm: NgForm;
-
   widgetFormGroup: FormGroup;
 
   widgetConfig: WidgetConfigComponentData;
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/layout/manage-dashboard-layouts-dialog.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/layout/manage-dashboard-layouts-dialog.component.html
index 5245c5346e..8c539a8cb8 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/layout/manage-dashboard-layouts-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/layout/manage-dashboard-layouts-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form #widgetForm="ngForm" [formGroup]="layoutsFormGroup" (ngSubmit)="save()">
+<form [formGroup]="layoutsFormGroup" (ngSubmit)="save()">
   <mat-toolbar color="primary">
     <h2 translate>layout.manage</h2>
     <span fxFlex></span>
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/manage-dashboard-customers-dialog.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/manage-dashboard-customers-dialog.component.html
index 45072cda33..1e6c21cb7c 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/manage-dashboard-customers-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/manage-dashboard-customers-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form #dashboardCustomersForm="ngForm" style="width: 600px;"
+<form style="width: 600px;"
       [formGroup]="dashboardCustomersFormGroup" (ngSubmit)="submit()">
   <mat-toolbar fxLayout="row" color="primary">
     <h2>{{ titleText | translate }}</h2>
@@ -43,8 +43,8 @@
     <span fxFlex></span>
     <button mat-button mat-raised-button color="primary"
             type="submit"
-            [disabled]="(isLoading$ | async) || dashboardCustomersForm.invalid
-            || !dashboardCustomersForm.dirty">
+            [disabled]="(isLoading$ | async) || dashboardCustomersFormGroup.invalid
+            || !dashboardCustomersFormGroup.dirty">
       {{ actionName | translate }}
     </button>
     <button mat-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/states/dashboard-state-dialog.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/states/dashboard-state-dialog.component.html
index 4f6a9c9ade..cc27d98d9a 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/states/dashboard-state-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/states/dashboard-state-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form #stateForm="ngForm" [formGroup]="stateFormGroup" (ngSubmit)="save()" style="min-width: 480px;">
+<form [formGroup]="stateFormGroup" (ngSubmit)="save()" style="min-width: 480px;">
   <mat-toolbar color="primary">
     <h2 translate>{{ isAdd ? 'dashboard.add-state' : 'dashboard.edit-state' }}</h2>
     <span fxFlex></span>
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/states/manage-dashboard-states-dialog.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/states/manage-dashboard-states-dialog.component.html
index 857f0c2565..d75b4f41c3 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/states/manage-dashboard-states-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/states/manage-dashboard-states-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form #statesForm="ngForm" [formGroup]="statesFormGroup" (ngSubmit)="save()" style="min-width: 480px;">
+<form [formGroup]="statesFormGroup" (ngSubmit)="save()" style="min-width: 480px;">
   <mat-toolbar color="primary">
     <h2 translate>dashboard.manage-states</h2>
     <span fxFlex></span>
diff --git a/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.html b/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.html
index fb67c143ce..1cf9911aa8 100644
--- a/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form #deviceCredentialsForm="ngForm" [formGroup]="deviceCredentialsFormGroup" (ngSubmit)="save()" style="min-width: 350px;">
+<form [formGroup]="deviceCredentialsFormGroup" (ngSubmit)="save()" style="min-width: 350px;">
   <mat-toolbar color="primary">
     <h2 translate>device.device-credentials</h2>
     <span fxFlex></span>
@@ -63,8 +63,8 @@
   <div mat-dialog-actions fxLayoutAlign="end center">
     <button *ngIf="!isReadOnly" mat-raised-button color="primary"
             type="submit"
-            [disabled]="(isLoading$ | async) || deviceCredentialsForm.invalid
-            || !deviceCredentialsForm.dirty">
+            [disabled]="(isLoading$ | async) || deviceCredentialsFormGroup.invalid
+            || !deviceCredentialsFormGroup.dirty">
       {{ 'action.save' | translate }}
     </button>
     <button mat-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/pages/device/device.component.html b/ui-ngx/src/app/modules/home/pages/device/device.component.html
index 526f877bc8..72a8f153b1 100644
--- a/ui-ngx/src/app/modules/home/pages/device/device.component.html
+++ b/ui-ngx/src/app/modules/home/pages/device/device.component.html
@@ -74,7 +74,7 @@
        [fxShow]="!isEdit && entity?.customerIsPublic && (deviceScope === 'customer' || deviceScope === 'tenant')">
     {{ 'device.device-public' | translate }}
   </div>
-  <form #entityNgForm="ngForm" [formGroup]="entityForm">
+  <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block">
         <mat-label translate>device.name</mat-label>
diff --git a/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.html b/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.html
index 0d5a733954..847fe4e670 100644
--- a/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.html
+++ b/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.html
@@ -62,7 +62,7 @@
        [fxShow]="!isEdit && entity?.customerIsPublic && (entityViewScope === 'customer' || entityViewScope === 'tenant')">
     {{ 'entity-view.entity-view-public' | translate }}
   </div>
-  <form #entityNgForm="ngForm" [formGroup]="entityForm">
+  <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block">
         <mat-label translate>entity-view.name</mat-label>
diff --git a/ui-ngx/src/app/modules/home/pages/profile/change-password-dialog.component.html b/ui-ngx/src/app/modules/home/pages/profile/change-password-dialog.component.html
index 8a43675cfd..9cd30ab768 100644
--- a/ui-ngx/src/app/modules/home/pages/profile/change-password-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/profile/change-password-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form #changePasswordForm="ngForm" [formGroup]="changePassword" (ngSubmit)="onChangePassword()">
+<form [formGroup]="changePassword" (ngSubmit)="onChangePassword()">
   <mat-toolbar fxLayout="row" color="primary">
     <h2 translate>profile.change-password</h2>
     <span fxFlex></span>
@@ -48,7 +48,7 @@
   <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
     <button mat-raised-button color="primary"
             type="submit"
-            [disabled]="(isLoading$ | async) || changePasswordForm.invalid">
+            [disabled]="(isLoading$ | async) || changePassword.invalid">
       {{ 'profile.change-password' | translate }}
     </button>
     <button mat-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/pages/profile/profile.component.html b/ui-ngx/src/app/modules/home/pages/profile/profile.component.html
index 88a47338c3..afb5eba3c0 100644
--- a/ui-ngx/src/app/modules/home/pages/profile/profile.component.html
+++ b/ui-ngx/src/app/modules/home/pages/profile/profile.component.html
@@ -35,7 +35,7 @@
     </mat-progress-bar>
     <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
     <mat-card-content style="padding-top: 16px;">
-      <form #profileForm="ngForm" [formGroup]="profile" (ngSubmit)="save()">
+      <form [formGroup]="profile" (ngSubmit)="save()">
         <fieldset [disabled]="isLoading$ | async">
           <mat-form-field class="mat-block">
             <mat-label translate>user.email</mat-label>
@@ -74,7 +74,7 @@
             <span fxFlex></span>
             <button mat-button mat-raised-button color="primary"
                     type="submit"
-                    [disabled]="(isLoading$ | async) || profileForm.invalid || !profileForm.dirty">
+                    [disabled]="(isLoading$ | async) || profile.invalid || !profile.dirty">
               {{ 'action.save' | translate }}
             </button>
           </div>
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.html
index 563dc43354..edd35ba06e 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form #ruleNodeForm="ngForm" (ngSubmit)="add()" style="min-width: 650px;">
+<form (ngSubmit)="add()" style="min-width: 650px;">
   <mat-toolbar fxLayout="row" color="primary">
     <h2 translate>rulenode.add</h2>
     <span fxFlex></span>
@@ -42,7 +42,7 @@
     <span fxFlex></span>
     <button mat-button mat-raised-button color="primary"
             type="submit"
-            [disabled]="(isLoading$ | async) || tbRuleNode.ruleNodeForm.invalid || !tbRuleNode.ruleNodeForm.dirty">
+            [disabled]="(isLoading$ | async) || tbRuleNode.ruleNodeFormGroup.invalid || !tbRuleNode.ruleNodeFormGroup.dirty">
       {{ 'action.add' | translate }}
     </button>
     <button mat-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-link-dialog.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-link-dialog.component.html
index f5e84baa97..17e7c1b33d 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-link-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-link-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form #ruleNodeLinkForm="ngForm" [formGroup]="ruleNodeLinkFormGroup" (ngSubmit)="add()" style="width: 900px;">
+<form [formGroup]="ruleNodeLinkFormGroup" (ngSubmit)="add()" style="width: 900px;">
   <mat-toolbar fxLayout="row" color="primary">
     <h2 translate>rulenode.add-link</h2>
     <span fxFlex></span>
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
index 2d08bd85d7..259196d1a6 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div class="mat-padding" fxLayout="column">
-  <form #ruleNodeForm="ngForm" [formGroup]="ruleNodeFormGroup">
+  <form [formGroup]="ruleNodeFormGroup">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit || isReadOnly">
       <section *ngIf="ruleNode.component.type !== ruleNodeType.RULE_CHAIN">
         <section fxLayout="column" fxLayout.gt-sm="row">
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.ts b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.ts
index c660e24892..e9be1fd352 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.ts
@@ -32,8 +32,6 @@ import { RuleNodeConfigComponent } from './rule-node-config.component';
 })
 export class RuleNodeDetailsComponent extends PageComponent implements OnInit, OnChanges {
 
-  @ViewChild('ruleNodeForm', {static: true}) ruleNodeForm: NgForm;
-
   @ViewChild('ruleNodeConfigComponent') ruleNodeConfigComponent: RuleNodeConfigComponent;
 
   @Input()
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-link.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-link.component.html
index 43d2f39a2b..112e95ca45 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-link.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-link.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div class="mat-padding" fxLayout="column">
-  <form #ruleNodeLinkForm="ngForm" [formGroup]="ruleNodeLinkFormGroup">
+  <form [formGroup]="ruleNodeLinkFormGroup">
     <tb-link-labels
       required
       formControlName="labels"
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-link.component.ts b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-link.component.ts
index b8867dfca6..77ef24fc4e 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-link.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-link.component.ts
@@ -33,8 +33,6 @@ import { TranslateService } from '@ngx-translate/core';
 })
 export class RuleNodeLinkComponent implements ControlValueAccessor, OnInit {
 
-  @ViewChild('ruleNodeLinkForm', {static: true}) ruleNodeLinkForm: NgForm;
-
   private requiredValue: boolean;
   get required(): boolean {
     return this.requiredValue;
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html
index 6033102484..793b8d4c60 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html
@@ -107,7 +107,7 @@
                             (closeDetails)="onEditRuleNodeClosed()"
                             (toggleDetailsEditMode)="onRevertRuleNodeEdit()"
                             (applyDetails)="saveRuleNode()"
-                            [theForm]="tbRuleNode.ruleNodeForm">
+                            [theForm]="tbRuleNode.ruleNodeFormGroup">
             <div class="details-buttons">
               <div [tb-help]="helpLinkIdForRuleNodeType()"></div>
             </div>
@@ -148,7 +148,7 @@
                             (closeDetails)="onEditRuleNodeLinkClosed()"
                             (toggleDetailsEditMode)="onRevertRuleNodeLinkEdit()"
                             (applyDetails)="saveRuleNodeLink()"
-                            [theForm]="tbRuleNodeLink.ruleNodeLinkForm">
+                            [theForm]="tbRuleNodeLink.ruleNodeLinkFormGroup">
             <div class="details-buttons">
               <div [tb-help]="'ruleEngine'"></div>
             </div>
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain.component.html
index 677a530c70..29c832e576 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain.component.html
@@ -52,7 +52,7 @@
   </div>
 </div>
 <div class="mat-padding" fxLayout="column">
-  <form #entityNgForm="ngForm" [formGroup]="entityForm">
+  <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block">
         <mat-label translate>rulechain.name</mat-label>
diff --git a/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.html b/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.html
index 7d0ccd5056..335a7d3c9a 100644
--- a/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.html
+++ b/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.html
@@ -40,7 +40,7 @@
   </div>
 </div>
 <div class="mat-padding" fxLayout="column">
-  <form #entityNgForm="ngForm" [formGroup]="entityForm">
+  <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block">
         <mat-label translate>tenant.title</mat-label>
diff --git a/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.ts b/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.ts
index 3bd54f9c75..3e43173beb 100644
--- a/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.ts
@@ -18,7 +18,7 @@ import { Component, Inject, OnInit, ViewChild } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { NgForm } from '@angular/forms';
+import { FormGroup, NgForm } from '@angular/forms';
 import { UserComponent } from '@modules/home/pages/user/user.component';
 import { Authority } from '@shared/models/authority.enum';
 import { ActivationMethod, activationMethodTranslations, User } from '@shared/models/user.model';
@@ -46,7 +46,7 @@ export interface AddUserDialogData {
 })
 export class AddUserDialogComponent extends DialogComponent<AddUserDialogComponent, User> implements OnInit {
 
-  detailsForm: NgForm;
+  detailsForm: FormGroup;
   user: User;
 
   activationMethods = Object.keys(ActivationMethod);
@@ -71,7 +71,7 @@ export class AddUserDialogComponent extends DialogComponent<AddUserDialogCompone
     this.user = {} as User;
     this.userComponent.isEdit = true;
     this.userComponent.entity = this.user;
-    this.detailsForm = this.userComponent.entityNgForm;
+    this.detailsForm = this.userComponent.entityForm;
   }
 
   cancel(): void {
diff --git a/ui-ngx/src/app/modules/home/pages/user/user.component.html b/ui-ngx/src/app/modules/home/pages/user/user.component.html
index c64b4c1c5b..2b8917596e 100644
--- a/ui-ngx/src/app/modules/home/pages/user/user.component.html
+++ b/ui-ngx/src/app/modules/home/pages/user/user.component.html
@@ -55,7 +55,7 @@
   </button>
 </div>
 <div class="mat-padding" fxLayout="column">
-  <form #entityNgForm="ngForm" [formGroup]="entityForm">
+  <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block">
         <mat-label translate>user.email</mat-label>
diff --git a/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html b/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html
index c611d82bc1..8af9a379d9 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form #saveWidgetTypeAsForm="ngForm" [formGroup]="saveWidgetTypeAsFormGroup" (ngSubmit)="saveAs()">
+<form [formGroup]="saveWidgetTypeAsFormGroup" (ngSubmit)="saveAs()">
   <mat-toolbar color="primary">
     <h2 translate>widget.save-widget-type-as</h2>
     <span fxFlex></span>
@@ -48,8 +48,8 @@
   <div mat-dialog-actions fxLayoutAlign="end center">
     <button mat-raised-button color="primary"
             type="submit"
-            [disabled]="(isLoading$ | async) || saveWidgetTypeAsForm.invalid
-            || !saveWidgetTypeAsForm.dirty">
+            [disabled]="(isLoading$ | async) || saveWidgetTypeAsFormGroup.invalid
+            || !saveWidgetTypeAsFormGroup.dirty">
       {{ 'action.saveAs' | translate }}
     </button>
     <button mat-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html
index 84a2bfad7f..a63e2353d2 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html
@@ -36,7 +36,7 @@
   </button>
 </div>
 <div class="mat-padding" fxLayout="column">
-  <form #entityNgForm="ngForm" [formGroup]="entityForm">
+  <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block">
         <mat-label translate>widgets-bundle.title</mat-label>
diff --git a/ui-ngx/src/app/modules/login/pages/login/create-password.component.html b/ui-ngx/src/app/modules/login/pages/login/create-password.component.html
index 76201072f3..ae412afaf4 100644
--- a/ui-ngx/src/app/modules/login/pages/login/create-password.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/create-password.component.html
@@ -24,7 +24,7 @@
     </mat-progress-bar>
     <span style="height: 4px;" *ngIf="!(isLoading$ | async)"></span>
     <mat-card-content>
-      <form #createPasswordForm="ngForm" [formGroup]="createPassword" (ngSubmit)="onCreatePassword()">
+      <form [formGroup]="createPassword" (ngSubmit)="onCreatePassword()">
         <fieldset [disabled]="isLoading$ | async">
           <div tb-toast fxLayout="column" class="layout-padding">
             <span style="height: 50px;"></span>
diff --git a/ui-ngx/src/app/modules/login/pages/login/login.component.html b/ui-ngx/src/app/modules/login/pages/login/login.component.html
index d9230018d5..5da3aeba56 100644
--- a/ui-ngx/src/app/modules/login/pages/login/login.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/login.component.html
@@ -18,7 +18,7 @@
 <div class="tb-login-content mat-app-background tb-dark" fxFlex fxLayoutAlign="center center">
   <mat-card style="height: 100%; max-height: 525px; overflow-y: auto;">
     <mat-card-content>
-      <form #loginForm="ngForm" class="tb-login-form" [formGroup]="loginFormGroup" (ngSubmit)="login()">
+      <form class="tb-login-form" [formGroup]="loginFormGroup" (ngSubmit)="login()">
         <fieldset [disabled]="isLoading$ | async" fxLayout="column">
           <div fxLayout="column" fxLayoutAlign="start center" style="padding: 15px 0;">
             <tb-logo class="login-logo"></tb-logo>
diff --git a/ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.html b/ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.html
index 7413a88f5d..b4a64c9a93 100644
--- a/ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.html
@@ -24,7 +24,7 @@
     </mat-progress-bar>
     <span style="height: 4px;" *ngIf="!(isLoading$ | async)"></span>
     <mat-card-content>
-      <form #requestPasswordResetForm="ngForm" [formGroup]="requestPasswordRequest" (ngSubmit)="sendResetPasswordLink()">
+      <form [formGroup]="requestPasswordRequest" (ngSubmit)="sendResetPasswordLink()">
         <fieldset [disabled]="isLoading$ | async">
           <div tb-toast fxLayout="column" class="layout-padding">
             <span style="height: 50px;"></span>
diff --git a/ui-ngx/src/app/modules/login/pages/login/reset-password.component.html b/ui-ngx/src/app/modules/login/pages/login/reset-password.component.html
index 35e72607c3..6c712f5e0a 100644
--- a/ui-ngx/src/app/modules/login/pages/login/reset-password.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/reset-password.component.html
@@ -27,7 +27,7 @@
     </mat-progress-bar>
     <span style="height: 4px;" *ngIf="!(isLoading$ | async)"></span>
     <mat-card-content>
-      <form #resetPasswordForm="ngForm" [formGroup]="resetPassword" (ngSubmit)="onResetPassword()">
+      <form [formGroup]="resetPassword" (ngSubmit)="onResetPassword()">
         <fieldset [disabled]="isLoading$ | async">
           <div tb-toast fxLayout="column" class="layout-padding">
             <span style="height: 50px;"></span>
diff --git a/ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.html
index 060a6836fc..698ecb75ae 100644
--- a/ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form class="tb-node-script-test-dialog"
-      #nodeScriptTestForm="ngForm" [formGroup]="nodeScriptTestFormGroup" (ngSubmit)="save()">
+      [formGroup]="nodeScriptTestFormGroup" (ngSubmit)="save()">
   <mat-toolbar fxLayout="row" color="primary">
     <h2>{{ 'rulenode.test-script-function' | translate }}</h2>
     <span fxFlex></span>