UI: Get rid of 'multiple directives with 'exportAs' set to ngForm'

@@ -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>

@@ -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>

@@ -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>

@@ -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

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form #widgetForm="ngForm">
+<form>
   <mat-toolbar color="primary">
     <h2 translate>layout.select</h2>
     <span fxFlex></span>

@@ -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>

@@ -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;
   }
 

@@ -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 {

@@ -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);
     }));

@@ -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);
 

@@ -35,8 +35,6 @@ export abstract class EntityComponent<T extends BaseData<HasId>,
 
   entityForm: FormGroup;
 
-  @ViewChild('entityNgForm', {static: true}) entityNgForm: NgForm;
-
   isEditValue: boolean;
 
   @Input()

@@ -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>

@@ -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>

@@ -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>

@@ -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"

@@ -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>

@@ -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});

@@ -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"

@@ -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"

@@ -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>

@@ -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>

@@ -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>

@@ -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>

@@ -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>

@@ -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>

@@ -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>

@@ -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>

@@ -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>

@@ -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"

@@ -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;

@@ -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>

@@ -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"

@@ -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>

@@ -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>

@@ -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"

@@ -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>

@@ -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>

@@ -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"

@@ -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>

@@ -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"

@@ -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>

@@ -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">

@@ -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()

@@ -16,7 +16,7 @@
 
 -->
 <div class="mat-padding" fxLayout="column">
-  <form #ruleNodeLinkForm="ngForm" [formGroup]="ruleNodeLinkFormGroup">
+  <form [formGroup]="ruleNodeLinkFormGroup">
     <tb-link-labels
       required
       formControlName="labels"

@@ -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;

@@ -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>

@@ -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>

@@ -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>

@@ -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 {

@@ -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>

@@ -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"

@@ -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>

@@ -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>

@@ -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>

@@ -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>

@@ -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>

@@ -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>