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

7 years ago · 0289b0c1a2
57 changed files with 86 additions and 97 deletions
--- 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>
--- 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>
--- 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>
--- 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
--- 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>
--- 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>
--- 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;
  }

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

--- 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()
--- 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>
--- 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>
--- 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>
--- 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"
--- 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>
--- 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});
--- 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"
--- 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"
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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"
--- 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;
--- 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>
--- 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"
--- 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>
--- 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>
--- 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"
--- 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>
--- 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>
--- 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"
--- 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>
--- 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"
--- 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>
--- 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">
--- 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()
--- 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"
--- 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;
--- 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>
--- 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>
--- 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>
--- 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 {
--- 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>
--- 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"
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>