UI: Angular 14 migration

ui-ngx/angular.json

@@ -243,7 +243,6 @@
       }
     }
   },
-  "defaultProject": "thingsboard",
   "cli": {
     "packageManager": "yarn",
     "analytics": false

ui-ngx/package.json

@@ -14,17 +14,17 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^13.3.12",
+    "@angular/animations": "^14.2.12",
     "@angular/cdk": "^13.3.9",
-    "@angular/common": "^13.3.12",
-    "@angular/compiler": "^13.3.12",
-    "@angular/core": "^13.3.12",
+    "@angular/common": "^14.2.12",
+    "@angular/compiler": "^14.2.12",
+    "@angular/core": "^14.2.12",
     "@angular/flex-layout": "^13.0.0-beta.38",
-    "@angular/forms": "^13.3.12",
+    "@angular/forms": "^14.2.12",
     "@angular/material": "^13.3.9",
-    "@angular/platform-browser": "^13.3.12",
-    "@angular/platform-browser-dynamic": "^13.3.12",
-    "@angular/router": "^13.3.12",
+    "@angular/platform-browser": "^14.2.12",
+    "@angular/platform-browser-dynamic": "^14.2.12",
+    "@angular/router": "^14.2.12",
     "@auth0/angular-jwt": "^5.0.2",
     "@date-io/date-fns": "^2.11.0",
     "@flowjs/flow.js": "^2.14.1",
@@ -102,10 +102,10 @@
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "~12.1.3",
-    "@angular-devkit/build-angular": "^13.3.10",
-    "@angular/cli": "^13.3.10",
-    "@angular/compiler-cli": "^13.3.12",
-    "@angular/language-service": "^13.3.12",
+    "@angular-devkit/build-angular": "^14.2.10",
+    "@angular/cli": "^14.2.10",
+    "@angular/compiler-cli": "^14.2.12",
+    "@angular/language-service": "^14.2.12",
     "@ngtools/webpack": "^13.3.10",
     "@types/ace-diff": "^2.1.1",
     "@types/canvas-gauges": "^2.1.4",
@@ -155,4 +155,4 @@
     "@types/react": "17.0.37",
     "ace-builds": "1.4.13"
   }
-}
+}

ui-ngx/src/app/core/guards/confirm-on-exit.guard.ts

@@ -16,7 +16,7 @@
 
 import { Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, CanDeactivate, RouterStateSnapshot } from '@angular/router';
-import { FormGroup } from '@angular/forms';
+import { UntypedFormGroup } from '@angular/forms';
 import { select, Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { AuthState } from '@core/auth/auth.models';
@@ -27,7 +27,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { isDefined } from '../utils';
 
 export interface HasConfirmForm {
-  confirmForm(): FormGroup;
+  confirmForm(): UntypedFormGroup;
 }
 
 export interface HasDirtyFlag {

ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.ts

@@ -18,7 +18,7 @@ import { Component, Inject, OnInit } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Observable, ReplaySubject } from 'rxjs';
 import { Router } from '@angular/router';
 import { DialogComponent } from '@app/shared/components/dialog.component';
@@ -50,7 +50,7 @@ export interface AlarmDetailsDialogData {
 export class AlarmDetailsDialogComponent extends DialogComponent<AlarmDetailsDialogComponent, boolean> implements OnInit {
 
   alarmId: string;
-  alarmFormGroup: FormGroup;
+  alarmFormGroup: UntypedFormGroup;
 
   allowAcknowledgment: boolean;
   allowClear: boolean;
@@ -73,7 +73,7 @@ export class AlarmDetailsDialogComponent extends DialogComponent<AlarmDetailsDia
               @Inject(MAT_DIALOG_DATA) public data: AlarmDetailsDialogData,
               private alarmService: AlarmService,
               public dialogRef: MatDialogRef<AlarmDetailsDialogComponent, boolean>,
-              public fb: FormBuilder) {
+              public fb: UntypedFormBuilder) {
     super(store, router, dialogRef);
 
     this.allowAcknowledgment = data.allowAcknowledgment;

ui-ngx/src/app/modules/home/components/alias/aliases-entity-autocomplete.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { AfterViewInit, Component, ElementRef, forwardRef, Input, OnInit, ViewChild } from '@angular/core';
-import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Observable, of } from 'rxjs';
 import { catchError, debounceTime, distinctUntilChanged, map, share, switchMap, tap } from 'rxjs/operators';
 import { emptyPageData, PageData } from '@shared/models/page/page-data';
@@ -40,7 +40,7 @@ import { isDefinedAndNotNull } from '@core/utils';
 })
 export class AliasesEntityAutocompleteComponent implements ControlValueAccessor, OnInit, AfterViewInit {
 
-  selectEntityInfoFormGroup: FormGroup;
+  selectEntityInfoFormGroup: UntypedFormGroup;
 
   modelValue: EntityInfo | null;
 
@@ -73,7 +73,7 @@ export class AliasesEntityAutocompleteComponent implements ControlValueAccessor,
   constructor(private store: Store<AppState>,
               public translate: TranslateService,
               private entityService: EntityService,
-              private fb: FormBuilder) {
+              private fb: UntypedFormBuilder) {
     this.selectEntityInfoFormGroup = this.fb.group({
       entityInfo: [null]
     });

ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.ts

@@ -20,9 +20,9 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import {
-  FormBuilder,
-  FormControl,
-  FormGroup,
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup,
   FormGroupDirective,
   NgForm,
   ValidatorFn,
@@ -59,7 +59,7 @@ export class EntityAliasDialogComponent extends DialogComponent<EntityAliasDialo
 
   alias: EntityAlias;
 
-  entityAliasFormGroup: FormGroup;
+  entityAliasFormGroup: UntypedFormGroup;
 
   submitted = false;
 
@@ -68,7 +68,7 @@ export class EntityAliasDialogComponent extends DialogComponent<EntityAliasDialo
               @Inject(MAT_DIALOG_DATA) public data: EntityAliasDialogData,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               public dialogRef: MatDialogRef<EntityAliasDialogComponent, EntityAlias>,
-              private fb: FormBuilder,
+              private fb: UntypedFormBuilder,
               private utils: UtilsService,
               public translate: TranslateService,
               private entityService: EntityService) {
@@ -103,7 +103,7 @@ export class EntityAliasDialogComponent extends DialogComponent<EntityAliasDialo
   }
 
   validateDuplicateAliasName(): ValidatorFn {
-    return (c: FormControl) => {
+    return (c: UntypedFormControl) => {
       const newAlias = c.value.trim();
       const found = this.entityAliases.find((entityAlias) => entityAlias.alias === newAlias);
       if (found) {
@@ -122,7 +122,7 @@ export class EntityAliasDialogComponent extends DialogComponent<EntityAliasDialo
   ngOnInit(): void {
   }
 
-  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
     const customErrorState = !!(control && control.invalid && this.submitted);
     return originalErrorState || customErrorState;

ui-ngx/src/app/modules/home/components/alias/entity-alias-select.component.ts

@@ -17,9 +17,9 @@
 import { AfterViewInit, Component, ElementRef, forwardRef, Input, OnInit, SkipSelf, ViewChild } from '@angular/core';
 import {
   ControlValueAccessor,
-  FormBuilder,
-  FormControl,
-  FormGroup,
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup,
   FormGroupDirective,
   NG_VALUE_ACCESSOR,
   NgForm
@@ -56,7 +56,7 @@ import { ErrorStateMatcher } from '@angular/material/core';
 })
 export class EntityAliasSelectComponent implements ControlValueAccessor, OnInit, AfterViewInit, ErrorStateMatcher {
 
-  selectEntityAliasFormGroup: FormGroup;
+  selectEntityAliasFormGroup: UntypedFormGroup;
 
   modelValue: string | null;
 
@@ -107,7 +107,7 @@ export class EntityAliasSelectComponent implements ControlValueAccessor, OnInit,
               private entityService: EntityService,
               public translate: TranslateService,
               public truncate: TruncatePipe,
-              private fb: FormBuilder) {
+              private fb: UntypedFormBuilder) {
     this.selectEntityAliasFormGroup = this.fb.group({
       entityAlias: [null]
     });
@@ -151,7 +151,7 @@ export class EntityAliasSelectComponent implements ControlValueAccessor, OnInit,
       );
   }
 
-  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
     const customErrorState = this.tbRequired && !this.modelValue;
     return originalErrorState || customErrorState;

ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.ts

@@ -21,10 +21,10 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import {
   AbstractControl,
-  FormArray,
-  FormBuilder,
-  FormControl,
-  FormGroup,
+  UntypedFormArray,
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup,
   FormGroupDirective,
   NgForm,
   Validators
@@ -67,7 +67,7 @@ export class EntityAliasesDialogComponent extends DialogComponent<EntityAliasesD
 
   aliasToWidgetsMap: {[aliasId: string]: Array<string>} = {};
 
-  entityAliasesFormGroup: FormGroup;
+  entityAliasesFormGroup: UntypedFormGroup;
 
   submitted = false;
 
@@ -76,7 +76,7 @@ export class EntityAliasesDialogComponent extends DialogComponent<EntityAliasesD
               @Inject(MAT_DIALOG_DATA) public data: EntityAliasesDialogData,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               public dialogRef: MatDialogRef<EntityAliasesDialogComponent, EntityAliases>,
-              private fb: FormBuilder,
+              private fb: UntypedFormBuilder,
               private utils: UtilsService,
               private translate: TranslateService,
               private dialogs: DialogService,
@@ -157,14 +157,14 @@ export class EntityAliasesDialogComponent extends DialogComponent<EntityAliasesD
   }
 
 
-  entityAliasesFormArray(): FormArray {
-    return this.entityAliasesFormGroup.get('entityAliases') as FormArray;
+  entityAliasesFormArray(): UntypedFormArray {
+    return this.entityAliasesFormGroup.get('entityAliases') as UntypedFormArray;
   }
 
   ngOnInit(): void {
   }
 
-  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
     const customErrorState = !!(control && control.invalid && this.submitted);
     return originalErrorState || customErrorState;
@@ -183,7 +183,7 @@ export class EntityAliasesDialogComponent extends DialogComponent<EntityAliasesD
       this.dialogs.alert(this.translate.instant('entity.unable-delete-entity-alias-title'),
         message, this.translate.instant('action.close'), true);
     } else {
-      (this.entityAliasesFormGroup.get('entityAliases') as FormArray).removeAt(index);
+      (this.entityAliasesFormGroup.get('entityAliases') as UntypedFormArray).removeAt(index);
       this.entityAliasesFormGroup.markAsDirty();
     }
   }
@@ -216,10 +216,10 @@ export class EntityAliasesDialogComponent extends DialogComponent<EntityAliasesD
     }).afterClosed().subscribe((entityAlias) => {
       if (entityAlias) {
         if (isAdd) {
-          (this.entityAliasesFormGroup.get('entityAliases') as FormArray)
+          (this.entityAliasesFormGroup.get('entityAliases') as UntypedFormArray)
             .push(this.createEntityAliasFormControl(entityAlias.id, entityAlias));
         } else {
-          const aliasFormControl = (this.entityAliasesFormGroup.get('entityAliases') as FormArray).at(index);
+          const aliasFormControl = (this.entityAliasesFormGroup.get('entityAliases') as UntypedFormArray).at(index);
           aliasFormControl.get('alias').patchValue(entityAlias.alias);
           aliasFormControl.get('filter').patchValue(entityAlias.filter);
           aliasFormControl.get('resolveMultiple').patchValue(entityAlias.filter.resolveMultiple);

ui-ngx/src/app/modules/home/components/attribute/add-attribute-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 { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
 import { EntityId } from '@shared/models/id/entity-id';
 import { Router } from '@angular/router';
 import { DialogComponent } from '@app/shared/components/dialog.component';
@@ -40,7 +40,7 @@ export interface AddAttributeDialogData {
 export class AddAttributeDialogComponent extends DialogComponent<AddAttributeDialogComponent, boolean>
   implements OnInit, ErrorStateMatcher {
 
-  attributeFormGroup: FormGroup;
+  attributeFormGroup: UntypedFormGroup;
 
   submitted = false;
 
@@ -50,7 +50,7 @@ export class AddAttributeDialogComponent extends DialogComponent<AddAttributeDia
               private attributeService: AttributeService,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               public dialogRef: MatDialogRef<AddAttributeDialogComponent, boolean>,
-              public fb: FormBuilder) {
+              public fb: UntypedFormBuilder) {
     super(store, router, dialogRef);
   }
 
@@ -61,7 +61,7 @@ export class AddAttributeDialogComponent extends DialogComponent<AddAttributeDia
     });
   }
 
-  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
     const customErrorState = !!(control && control.invalid && this.submitted);
     return originalErrorState || customErrorState;

ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.ts

@@ -19,7 +19,7 @@ import { ErrorStateMatcher } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { DialogComponent } from '@app/shared/components/dialog.component';
 import { UtilsService } from '@core/services/utils.service';
@@ -57,7 +57,7 @@ export class AddWidgetToDashboardDialogComponent extends
   DialogComponent<AddWidgetToDashboardDialogComponent, void>
   implements OnInit, ErrorStateMatcher {
 
-  addWidgetFormGroup: FormGroup;
+  addWidgetFormGroup: UntypedFormGroup;
 
   submitted = false;
 
@@ -66,7 +66,7 @@ export class AddWidgetToDashboardDialogComponent extends
               @Inject(MAT_DIALOG_DATA) public data: AddWidgetToDashboardDialogData,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               public dialogRef: MatDialogRef<AddWidgetToDashboardDialogComponent, void>,
-              private fb: FormBuilder,
+              private fb: UntypedFormBuilder,
               private utils: UtilsService,
               private dashboardUtils: DashboardUtilsService,
               private dashboardService: DashboardService,
@@ -107,7 +107,7 @@ export class AddWidgetToDashboardDialogComponent extends
   ngOnInit(): void {
   }
 
-  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
     const customErrorState = !!(control && control.invalid && this.submitted);
     return originalErrorState || customErrorState;

ui-ngx/src/app/modules/home/components/attribute/edit-attribute-value-panel.component.ts

@@ -18,7 +18,7 @@ import { Component, Inject, InjectionToken, OnInit, SkipSelf } from '@angular/co
 import { ErrorStateMatcher } from '@angular/material/core';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
 import { PageComponent } from '@shared/components/page.component';
 import { OverlayRef } from '@angular/cdk/overlay';
 
@@ -36,7 +36,7 @@ export interface EditAttributeValuePanelData {
 })
 export class EditAttributeValuePanelComponent extends PageComponent implements OnInit, ErrorStateMatcher {
 
-  attributeFormGroup: FormGroup;
+  attributeFormGroup: UntypedFormGroup;
 
   result: any = null;
 
@@ -46,7 +46,7 @@ export class EditAttributeValuePanelComponent extends PageComponent implements O
               @Inject(EDIT_ATTRIBUTE_VALUE_PANEL_DATA) public data: EditAttributeValuePanelData,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               public overlayRef: OverlayRef,
-              public fb: FormBuilder) {
+              public fb: UntypedFormBuilder) {
     super(store);
   }
 
@@ -56,7 +56,7 @@ export class EditAttributeValuePanelComponent extends PageComponent implements O
     });
   }
 
-  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
     const customErrorState = !!(control && control.invalid && this.submitted);
     return originalErrorState || customErrorState;

ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-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 { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, FormGroupDirective, NgForm } from '@angular/forms';
 import { Router } from '@angular/router';
 import { DialogComponent } from '@app/shared/components/dialog.component';
 import { Widget, widgetTypesData } from '@shared/models/widget.models';
@@ -44,7 +44,7 @@ export interface AddWidgetDialogData {
 export class AddWidgetDialogComponent extends DialogComponent<AddWidgetDialogComponent, Widget>
   implements OnInit, ErrorStateMatcher {
 
-  widgetFormGroup: FormGroup;
+  widgetFormGroup: UntypedFormGroup;
 
   dashboard: Dashboard;
   aliasController: IAliasController;
@@ -57,7 +57,7 @@ export class AddWidgetDialogComponent extends DialogComponent<AddWidgetDialogCom
               @Inject(MAT_DIALOG_DATA) public data: AddWidgetDialogData,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               public dialogRef: MatDialogRef<AddWidgetDialogComponent, Widget>,
-              private fb: FormBuilder) {
+              private fb: UntypedFormBuilder) {
     super(store, router, dialogRef);
 
     this.dashboard = this.data.dashboard;
@@ -115,7 +115,7 @@ export class AddWidgetDialogComponent extends DialogComponent<AddWidgetDialogCom
   ngOnInit(): void {
   }
 
-  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
     const customErrorState = !!(control && control.invalid && this.submitted);
     return originalErrorState || customErrorState;

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.ts

@@ -18,7 +18,7 @@ import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { DialogComponent } from '@app/shared/components/dialog.component';
 import { DashboardId } from '@shared/models/id/dashboard-id';
@@ -56,8 +56,8 @@ export class DashboardImageDialogComponent extends DialogComponent<DashboardImag
   safeImageUrl?: SafeUrl;
   dashboardElement: HTMLElement;
 
-  dashboardRectFormGroup: FormGroup;
-  dashboardImageFormGroup: FormGroup;
+  dashboardRectFormGroup: UntypedFormGroup;
+  dashboardImageFormGroup: UntypedFormGroup;
 
   constructor(protected store: Store<AppState>,
               protected router: Router,
@@ -65,7 +65,7 @@ export class DashboardImageDialogComponent extends DialogComponent<DashboardImag
               public dialogRef: MatDialogRef<DashboardImageDialogComponent, DashboardImageDialogResult>,
               private dashboardService: DashboardService,
               private sanitizer: DomSanitizer,
-              private fb: FormBuilder) {
+              private fb: UntypedFormBuilder) {
     super(store, router, dialogRef);
 
     this.dashboardId = this.data.dashboardId;

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts

@@ -94,7 +94,7 @@ import {
   WidgetContextMenuItem
 } from '../../models/dashboard-component.models';
 import { WidgetComponentService } from '../../components/widget/widget-component.service';
-import { FormBuilder } from '@angular/forms';
+import { UntypedFormBuilder } from '@angular/forms';
 import { ItemBufferService } from '@core/services/item-buffer.service';
 import { MatDialog } from '@angular/material/dialog';
 import {
@@ -352,7 +352,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
               private itembuffer: ItemBufferService,
               private importExport: ImportExportService,
               private mobileService: MobileService,
-              private fb: FormBuilder,
+              private fb: UntypedFormBuilder,
               private dialog: MatDialog,
               private translate: TranslateService,
               private popoverService: TbPopoverService,

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-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 { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { DialogComponent } from '@app/shared/components/dialog.component';
 import { UtilsService } from '@core/services/utils.service';
@@ -46,8 +46,8 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS
   settings: DashboardSettings;
   gridSettings: GridSettings;
 
-  settingsFormGroup: FormGroup;
-  gridSettingsFormGroup: FormGroup;
+  settingsFormGroup: UntypedFormGroup;
+  gridSettingsFormGroup: UntypedFormGroup;
 
   stateControllerIds: string[];
 
@@ -58,7 +58,7 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS
               @Inject(MAT_DIALOG_DATA) public data: DashboardSettingsDialogData,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               public dialogRef: MatDialogRef<DashboardSettingsDialogComponent, DashboardSettingsDialogData>,
-              private fb: FormBuilder,
+              private fb: UntypedFormBuilder,
               private utils: UtilsService,
               private dashboardUtils: DashboardUtilsService,
               private translate: TranslateService,
@@ -181,7 +181,7 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS
   ngOnInit(): void {
   }
 
-  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
     const customErrorState = !!(control && control.invalid && this.submitted);
     return originalErrorState || customErrorState;

ui-ngx/src/app/modules/home/components/dashboard-page/edit-widget.component.ts

@@ -25,7 +25,7 @@ import { Widget } from '@shared/models/widget.models';
 import { WidgetComponentService } from '@home/components/widget/widget-component.service';
 import { WidgetConfigComponentData } from '../../models/widget-component.models';
 import { isDefined, isString } from '@core/utils';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 
 @Component({
   selector: 'tb-edit-widget',
@@ -49,13 +49,13 @@ export class EditWidgetComponent extends PageComponent implements OnInit, OnChan
   @Input()
   widgetLayout: WidgetLayout;
 
-  widgetFormGroup: FormGroup;
+  widgetFormGroup: UntypedFormGroup;
 
   widgetConfig: WidgetConfigComponentData;
 
   constructor(protected store: Store<AppState>,
               private dialog: MatDialog,
-              private fb: FormBuilder,
+              private fb: UntypedFormBuilder,
               private widgetComponentService: WidgetComponentService) {
     super(store);
     this.widgetFormGroup = this.fb.group({

ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts

@@ -21,9 +21,9 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import {
   AbstractControl,
-  FormBuilder,
-  FormControl,
-  FormGroup,
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup,
   FormGroupDirective,
   NgForm,
   Validators
@@ -62,7 +62,7 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
 
   @ViewChild('tooltip', {static: true}) tooltip: MatTooltip;
 
-  layoutsFormGroup: FormGroup;
+  layoutsFormGroup: UntypedFormGroup;
 
   layoutWidthType = LayoutWidthType;
 
@@ -81,7 +81,7 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
               @Inject(MAT_DIALOG_DATA) private data: ManageDashboardLayoutsDialogData,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               protected dialogRef: MatDialogRef<ManageDashboardLayoutsDialogComponent, DashboardStateLayouts>,
-              private fb: FormBuilder,
+              private fb: UntypedFormBuilder,
               private utils: UtilsService,
               private dashboardUtils: DashboardUtilsService,
               private translate: TranslateService,
@@ -203,7 +203,7 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
     }
   }
 
-  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
     const customErrorState = !!(control && control.invalid && this.submitted);
     return originalErrorState || customErrorState;

ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.ts

@@ -20,9 +20,9 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import {
-  FormBuilder,
-  FormControl,
-  FormGroup,
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup,
   FormGroupDirective,
   NgForm,
   ValidatorFn,
@@ -51,7 +51,7 @@ export class DashboardStateDialogComponent extends
   DialogComponent<DashboardStateDialogComponent, DashboardStateInfo>
   implements OnInit, ErrorStateMatcher {
 
-  stateFormGroup: FormGroup;
+  stateFormGroup: UntypedFormGroup;
 
   states: {[id: string]: DashboardState };
   state: DashboardStateInfo;
@@ -68,7 +68,7 @@ export class DashboardStateDialogComponent extends
               @Inject(MAT_DIALOG_DATA) public data: DashboardStateDialogData,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               public dialogRef: MatDialogRef<DashboardStateDialogComponent, DashboardStateInfo>,
-              private fb: FormBuilder,
+              private fb: UntypedFormBuilder,
               private translate: TranslateService,
               private dashboardUtils: DashboardUtilsService) {
     super(store, router, dialogRef);
@@ -108,7 +108,7 @@ export class DashboardStateDialogComponent extends
   }
 
   private validateDuplicateStateId(): ValidatorFn {
-    return (c: FormControl) => {
+    return (c: UntypedFormControl) => {
       const newStateId: string = c.value;
       if (newStateId) {
         const existing = this.states[newStateId];
@@ -125,7 +125,7 @@ export class DashboardStateDialogComponent extends
   ngOnInit(): void {
   }
 
-  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
     const customErrorState = !!(control && control.invalid && this.submitted);
     return originalErrorState || customErrorState;

ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.ts

@@ -19,7 +19,7 @@ import { ErrorStateMatcher } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, FormGroupDirective, NgForm } from '@angular/forms';
 import { Router } from '@angular/router';
 import { DialogComponent } from '@app/shared/components/dialog.component';
 import { DashboardState } from '@app/shared/models/dashboard.models';
@@ -55,7 +55,7 @@ export class ManageDashboardStatesDialogComponent extends
                   DialogComponent<ManageDashboardStatesDialogComponent, {[id: string]: DashboardState }>
   implements OnInit, ErrorStateMatcher, AfterViewInit {
 
-  statesFormGroup: FormGroup;
+  statesFormGroup: UntypedFormGroup;
 
   states: {[id: string]: DashboardState };
 
@@ -76,7 +76,7 @@ export class ManageDashboardStatesDialogComponent extends
               @Inject(MAT_DIALOG_DATA) public data: ManageDashboardStatesDialogData,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               public dialogRef: MatDialogRef<ManageDashboardStatesDialogComponent, {[id: string]: DashboardState }>,
-              private fb: FormBuilder,
+              private fb: UntypedFormBuilder,
               private translate: TranslateService,
               private dialogs: DialogService,
               private dialog: MatDialog) {
@@ -233,7 +233,7 @@ export class ManageDashboardStatesDialogComponent extends
     this.updateData(true);
   }
 
-  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
     const customErrorState = !!(control && control.invalid && this.submitted);
     return originalErrorState || customErrorState;

ui-ngx/src/app/modules/home/components/dashboard/select-target-state-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 { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { DialogComponent } from '@app/shared/components/dialog.component';
 import { DashboardState } from '@app/shared/models/dashboard.models';
@@ -40,7 +40,7 @@ export class SelectTargetStateDialogComponent extends
   implements OnInit, ErrorStateMatcher {
 
   states: {[id: string]: DashboardState };
-  stateFormGroup: FormGroup;
+  stateFormGroup: UntypedFormGroup;
 
   submitted = false;
 
@@ -49,7 +49,7 @@ export class SelectTargetStateDialogComponent extends
               @Inject(MAT_DIALOG_DATA) public data: SelectTargetStateDialogData,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               public dialogRef: MatDialogRef<SelectTargetStateDialogComponent, string>,
-              private fb: FormBuilder,
+              private fb: UntypedFormBuilder,
               private dashboardUtils: DashboardUtilsService) {
     super(store, router, dialogRef);
 
@@ -65,7 +65,7 @@ export class SelectTargetStateDialogComponent extends
   ngOnInit(): void {
   }
 
-  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
     const customErrorState = !!(control && control.invalid && this.submitted);
     return originalErrorState || customErrorState;

ui-ngx/src/app/modules/home/components/details-panel.component.ts

@@ -18,7 +18,7 @@ import { ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, Output }
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { FormGroup } from '@angular/forms';
+import { UntypedFormGroup } from '@angular/forms';
 import { Subscription } from 'rxjs';
 
 @Component({
@@ -36,11 +36,11 @@ export class DetailsPanelComponent extends PageComponent implements OnDestroy {
   @Input() isShowSearch = false;
   @Input() backgroundColor = '#FFF';
 
-  private theFormValue: FormGroup;
+  private theFormValue: UntypedFormGroup;
   private formSubscription: Subscription = null;
 
   @Input()
-  set theForm(value: FormGroup) {
+  set theForm(value: UntypedFormGroup) {
     if (this.theFormValue !== value) {
       if (this.formSubscription !== null) {
         this.formSubscription.unsubscribe();
@@ -53,7 +53,7 @@ export class DetailsPanelComponent extends PageComponent implements OnDestroy {
     }
   }
 
-  get theForm(): FormGroup {
+  get theForm(): UntypedFormGroup {
     return this.theFormValue;
   }
 

ui-ngx/src/app/modules/home/components/device/device-credentials-lwm2m-server.component.ts

@@ -17,8 +17,8 @@
 import { Component, forwardRef, OnDestroy } from '@angular/core';
 import {
   ControlValueAccessor,
-  FormBuilder,
-  FormGroup,
+  UntypedFormBuilder,
+  UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   ValidationErrors,
@@ -55,7 +55,7 @@ import { Subject } from 'rxjs';
 
 export class DeviceCredentialsLwm2mServerComponent implements OnDestroy, ControlValueAccessor, Validator {
 
-  serverFormGroup: FormGroup;
+  serverFormGroup: UntypedFormGroup;
   securityConfigLwM2MType = Lwm2mSecurityType;
   securityConfigLwM2MTypes = Object.values(Lwm2mSecurityType);
   lwm2mSecurityTypeTranslationMap = Lwm2mSecurityTypeTranslationMap;
@@ -65,7 +65,7 @@ export class DeviceCredentialsLwm2mServerComponent implements OnDestroy, Control
   private destroy$ = new Subject();
   private propagateChange = (v: any) => {};
 
-  constructor(private fb: FormBuilder) {
+  constructor(private fb: UntypedFormBuilder) {
     this.serverFormGroup = this.fb.group({
       securityMode: [Lwm2mSecurityType.NO_SEC],
       clientPublicKeyOrId: [''],

ui-ngx/src/app/modules/home/components/device/device-credentials-lwm2m.component.ts

@@ -17,8 +17,8 @@
 import { Component, forwardRef, OnDestroy } from '@angular/core';
 import {
   ControlValueAccessor,
-  FormBuilder,
-  FormGroup,
+  UntypedFormBuilder,
+  UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   ValidationErrors,
@@ -56,7 +56,7 @@ import { isDefinedAndNotNull } from '@core/utils';
 
 export class DeviceCredentialsLwm2mComponent implements ControlValueAccessor, Validator, OnDestroy {
 
-  lwm2mConfigFormGroup: FormGroup;
+  lwm2mConfigFormGroup: UntypedFormGroup;
   securityConfigLwM2MType = Lwm2mSecurityType;
   securityConfigLwM2MTypes = Object.keys(Lwm2mSecurityType);
   credentialTypeLwM2MNamesMap = Lwm2mSecurityTypeTranslationMap;
@@ -65,7 +65,7 @@ export class DeviceCredentialsLwm2mComponent implements ControlValueAccessor, Va
   private destroy$ = new Subject();
   private propagateChange = (v: any) => {};
 
-  constructor(private fb: FormBuilder) {
+  constructor(private fb: UntypedFormBuilder) {
     this.lwm2mConfigFormGroup = this.initLwm2mConfigForm();
   }
 
@@ -161,7 +161,7 @@ export class DeviceCredentialsLwm2mComponent implements ControlValueAccessor, Va
     this.lwm2mConfigFormGroup.get('client.cert').disable({emitEvent: false});
   }
 
-  private initLwm2mConfigForm = (): FormGroup => {
+  private initLwm2mConfigForm = (): UntypedFormGroup => {
     const formGroup =  this.fb.group({
       client: this.fb.group({
         endpoint: ['', Validators.required],

ui-ngx/src/app/modules/home/components/device/device-credentials-mqtt-basic.component.ts

@@ -17,8 +17,8 @@
 import { Component, forwardRef, Input, OnDestroy } from '@angular/core';
 import {
   ControlValueAccessor,
-  FormBuilder,
-  FormGroup,
+  UntypedFormBuilder,
+  UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   ValidationErrors,
@@ -52,12 +52,12 @@ export class DeviceCredentialsMqttBasicComponent implements ControlValueAccessor
   @Input()
   disabled: boolean;
 
-  deviceCredentialsMqttFormGroup: FormGroup;
+  deviceCredentialsMqttFormGroup: UntypedFormGroup;
 
   private destroy$ = new Subject();
   private propagateChange = (v: any) => {};
 
-  constructor(public fb: FormBuilder) {
+  constructor(public fb: UntypedFormBuilder) {
     this.deviceCredentialsMqttFormGroup = this.fb.group({
       clientId: [null],
       userName: [null],
@@ -119,7 +119,7 @@ export class DeviceCredentialsMqttBasicComponent implements ControlValueAccessor
   }
 
   private atLeastOne(validator: ValidatorFn, controls: string[] = null) {
-    return (group: FormGroup): ValidationErrors | null => {
+    return (group: UntypedFormGroup): ValidationErrors | null => {
       if (!controls) {
         controls = Object.keys(group.controls);
       }

ui-ngx/src/app/modules/home/components/device/device-credentials.component.ts

@@ -17,9 +17,9 @@
 import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
-  FormBuilder,
-  FormControl,
-  FormGroup,
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   Validator,
@@ -75,7 +75,7 @@ export class DeviceCredentialsComponent implements ControlValueAccessor, OnInit,
 
   private destroy$ = new Subject();
 
-  deviceCredentialsFormGroup: FormGroup;
+  deviceCredentialsFormGroup: UntypedFormGroup;
 
   deviceCredentialsType = DeviceCredentialsType;
 
@@ -85,7 +85,7 @@ export class DeviceCredentialsComponent implements ControlValueAccessor, OnInit,
 
   private propagateChange = (v: any) => {};
 
-  constructor(public fb: FormBuilder) {
+  constructor(public fb: UntypedFormBuilder) {
     this.deviceCredentialsFormGroup = this.fb.group({
       credentialsType: [DeviceCredentialsType.ACCESS_TOKEN],
       credentialsId: [null],
@@ -148,7 +148,7 @@ export class DeviceCredentialsComponent implements ControlValueAccessor, OnInit,
     }
   }
 
-  public validate(c: FormControl) {
+  public validate(c: UntypedFormControl) {
     return this.deviceCredentialsFormGroup.valid ? null : {
       deviceCredentials: {
         valid: false,

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, FormGroup, FormGroupDirective, NgForm } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup, 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: FormGroup;
+  detailsForm: UntypedFormGroup;
 
   entitiesTableConfig: EntityTableConfig<BaseData<HasId>>;
   translations: EntityTypeTranslation;
@@ -98,7 +98,7 @@ export class AddEntityDialogComponent extends
     }
   }
 
-  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
     const customErrorState = !!(control && control.invalid && this.submitted);
     return originalErrorState || customErrorState;

ui-ngx/src/app/modules/home/components/entity/contact-based.component.ts

@@ -16,7 +16,7 @@
 
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, ValidatorFn, Validators } from '@angular/forms';
 import { ContactBased } from '@shared/models/contact-based.model';
 import { AfterViewInit, ChangeDetectorRef, Directive } from '@angular/core';
 import { POSTAL_CODE_PATTERNS } from '@home/models/contact.models';
@@ -28,14 +28,14 @@ import { EntityTableConfig } from '@home/models/entity/entities-table-config.mod
 export abstract class ContactBasedComponent<T extends ContactBased<HasId>> extends EntityComponent<T> implements AfterViewInit {
 
   protected constructor(protected store: Store<AppState>,
-                        protected fb: FormBuilder,
+                        protected fb: UntypedFormBuilder,
                         protected entityValue: T,
                         protected entitiesTableConfigValue: EntityTableConfig<T>,
                         protected cd: ChangeDetectorRef) {
     super(store, fb, entityValue, entitiesTableConfigValue, cd);
   }
 
-  buildForm(entity: T): FormGroup {
+  buildForm(entity: T): UntypedFormGroup {
     const entityForm = this.buildEntityForm(entity);
     entityForm.addControl('country', this.fb.control(entity ? entity.country : '', [Validators.maxLength(255)]));
     entityForm.addControl('city', this.fb.control(entity ? entity.city : '', [Validators.maxLength(255)]));
@@ -82,7 +82,7 @@ export abstract class ContactBasedComponent<T extends ContactBased<HasId>> exten
     return zipValidators;
   }
 
-  abstract buildEntityForm(entity: T): FormGroup;
+  abstract buildEntityForm(entity: T): UntypedFormGroup;
 
   abstract updateEntityForm(entity: T);
 

ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.ts

@@ -29,7 +29,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 { ActivatedRoute, Router } from '@angular/router';
-import { FormGroup } from '@angular/forms';
+import { UntypedFormGroup } from '@angular/forms';
 import { AssetId } from '@shared/models/id/asset-id';
 import { TranslateService } from '@ngx-translate/core';
 import { deepClone } from '@core/utils';
@@ -140,7 +140,7 @@ export class EntityDetailsPageComponent extends EntityDetailsPanelComponent impl
     });
   }
 
-  confirmForm(): FormGroup {
+  confirmForm(): UntypedFormGroup {
     return this.detailsForm;
   }
 

ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.ts

@@ -36,7 +36,7 @@ import { AppState } from '@core/core.state';
 import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
 import { BaseData, HasId, hasIdEquals } from '@shared/models/base-data';
 import { EntityType, EntityTypeResource, EntityTypeTranslation } from '@shared/models/entity-type.models';
-import { FormGroup } from '@angular/forms';
+import { UntypedFormGroup } 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 AfterV
 
   entityTabsComponentRef: ComponentRef<EntityTabsComponent<BaseData<HasId>>>;
   entityTabsComponent: EntityTabsComponent<BaseData<HasId>>;
-  detailsForm: FormGroup;
+  detailsForm: UntypedFormGroup;
 
   entitiesTableConfigValue: EntityTableConfig<BaseData<HasId>>;
   isEditValue = false;

ui-ngx/src/app/modules/home/components/entity/entity-filter.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core';
-import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
+import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 import { AliasFilterType, aliasFilterTypeTranslationMap, EntityAliasFilter } from '@shared/models/alias.models';
 import { AliasEntityType, EntityType } from '@shared/models/entity-type.models';
 import { TranslateService } from '@ngx-translate/core';
@@ -44,8 +44,8 @@ export class EntityFilterComponent implements ControlValueAccessor, OnInit {
 
   @Output() resolveMultipleChanged: EventEmitter<boolean> = new EventEmitter<boolean>();
 
-  entityFilterFormGroup: FormGroup;
-  filterFormGroup: FormGroup;
+  entityFilterFormGroup: UntypedFormGroup;
+  filterFormGroup: UntypedFormGroup;
 
   aliasFilterTypes: Array<AliasFilterType>;
 
@@ -61,7 +61,7 @@ export class EntityFilterComponent implements ControlValueAccessor, OnInit {
 
   constructor(private translate: TranslateService,
               private entityService: EntityService,
-              private fb: FormBuilder) {
+              private fb: UntypedFormBuilder) {
   }
 
   ngOnInit(): void {

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 { FormGroup } from '@angular/forms';
+import { UntypedFormGroup } 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: FormGroup;
+  detailsForm: UntypedFormGroup;
 
   private entityTabsSubject = new BehaviorSubject<Array<MatTab>>(null);
 

ui-ngx/src/app/modules/home/components/entity/entity.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { BaseData, HasId } from '@shared/models/base-data';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { PageComponent } from '@shared/components/page.component';
 import { ChangeDetectorRef, Directive, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Store } from '@ngrx/store';
@@ -34,7 +34,7 @@ export abstract class EntityComponent<T extends BaseData<HasId>,
   C extends EntityTableConfig<T, P, L> = EntityTableConfig<T, P, L>>
   extends PageComponent implements OnInit {
 
-  entityForm: FormGroup;
+  entityForm: UntypedFormGroup;
 
   isEditValue: boolean;
 
@@ -81,7 +81,7 @@ export abstract class EntityComponent<T extends BaseData<HasId>,
   entityAction = new EventEmitter<EntityAction<T>>();
 
   protected constructor(protected store: Store<AppState>,
-                        protected fb: FormBuilder,
+                        protected fb: UntypedFormBuilder,
                         protected entityValue: T,
                         protected entitiesTableConfigValue: C,
                         protected cd: ChangeDetectorRef) {
@@ -126,7 +126,7 @@ export abstract class EntityComponent<T extends BaseData<HasId>,
     this.entitiesTableConfigValue = entitiesTableConfig;
   }
 
-  abstract buildForm(entity: T): FormGroup;
+  abstract buildForm(entity: T): UntypedFormGroup;
 
   abstract updateForm(entity: T);
 

ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component, Inject, InjectionToken } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { OverlayRef } from '@angular/cdk/overlay';
 import { EntityType } from '@shared/models/entity-type.models';
 import { FilterEventBody } from '@shared/models/event.models';
@@ -41,7 +41,7 @@ export interface FilterEntityColumn {
 })
 export class EventFilterPanelComponent {
 
-  eventFilterFormGroup: FormGroup;
+  eventFilterFormGroup: UntypedFormGroup;
   result: EventFilterPanelData;
 
   private conditionError = false;
@@ -55,7 +55,7 @@ export class EventFilterPanelComponent {
   constructor(@Inject(EVENT_FILTER_PANEL_DATA)
               public data: EventFilterPanelData,
               public overlayRef: OverlayRef,
-              private fb: FormBuilder) {
+              private fb: UntypedFormBuilder) {
     this.eventFilterFormGroup = this.fb.group({});
     this.data.columns.forEach((column) => {
       this.showColumns.push(column);

ui-ngx/src/app/modules/home/components/filter/boolean-filter-predicate.component.ts

@@ -17,8 +17,8 @@
 import { Component, forwardRef, Input, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
-  FormBuilder,
-  FormGroup,
+  UntypedFormBuilder,
+  UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   ValidationErrors,
@@ -60,7 +60,7 @@ export class BooleanFilterPredicateComponent implements ControlValueAccessor, Va
 
   valueTypeEnum = EntityKeyValueType;
 
-  booleanFilterPredicateFormGroup: FormGroup;
+  booleanFilterPredicateFormGroup: UntypedFormGroup;
 
   booleanOperations = Object.keys(BooleanOperation);
   booleanOperationEnum = BooleanOperation;
@@ -68,7 +68,7 @@ export class BooleanFilterPredicateComponent implements ControlValueAccessor, Va
 
   private propagateChange = null;
 
-  constructor(private fb: FormBuilder) {
+  constructor(private fb: UntypedFormBuilder) {
   }
 
   ngOnInit(): void {

ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate-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 { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { DialogComponent } from '@app/shared/components/dialog.component';
 import {
@@ -40,7 +40,7 @@ export class ComplexFilterPredicateDialogComponent extends
   DialogComponent<ComplexFilterPredicateDialogComponent, ComplexFilterPredicateInfo>
   implements OnInit, ErrorStateMatcher {
 
-  complexFilterFormGroup: FormGroup;
+  complexFilterFormGroup: UntypedFormGroup;
 
   complexOperations = Object.keys(ComplexOperation);
   complexOperationEnum = ComplexOperation;
@@ -55,7 +55,7 @@ export class ComplexFilterPredicateDialogComponent extends
               @Inject(MAT_DIALOG_DATA) public data: ComplexFilterPredicateDialogData,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               public dialogRef: MatDialogRef<ComplexFilterPredicateDialogComponent, ComplexFilterPredicateInfo>,
-              private fb: FormBuilder) {
+              private fb: UntypedFormBuilder) {
     super(store, router, dialogRef);
 
     this.isAdd = this.data.isAdd;
@@ -74,7 +74,7 @@ export class ComplexFilterPredicateDialogComponent extends
   ngOnInit(): void {
   }
 
-  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
     const customErrorState = !!(control && control.invalid && this.submitted);
     return originalErrorState || customErrorState;

ui-ngx/src/app/modules/home/components/filter/filter-dialog.component.ts

@@ -20,9 +20,9 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import {
-  FormBuilder,
-  FormControl,
-  FormGroup,
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup,
   FormGroupDirective,
   NgForm,
   ValidatorFn,
@@ -54,7 +54,7 @@ export class FilterDialogComponent extends DialogComponent<FilterDialogComponent
 
   filter: Filter;
 
-  filterFormGroup: FormGroup;
+  filterFormGroup: UntypedFormGroup;
 
   submitted = false;
 
@@ -63,7 +63,7 @@ export class FilterDialogComponent extends DialogComponent<FilterDialogComponent
               @Inject(MAT_DIALOG_DATA) public data: FilterDialogData,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               public dialogRef: MatDialogRef<FilterDialogComponent, Filter>,
-              private fb: FormBuilder,
+              private fb: UntypedFormBuilder,
               private utils: UtilsService,
               public translate: TranslateService) {
     super(store, router, dialogRef);
@@ -95,7 +95,7 @@ export class FilterDialogComponent extends DialogComponent<FilterDialogComponent
   }
 
   validateDuplicateFilterName(): ValidatorFn {
-    return (c: FormControl) => {
+    return (c: UntypedFormControl) => {
       const newFilter = c.value.trim();
       const found = this.filters.find((filter) => filter.filter === newFilter);
       if (found) {
@@ -114,7 +114,7 @@ export class FilterDialogComponent extends DialogComponent<FilterDialogComponent
   ngOnInit(): void {
   }
 
-  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
     const customErrorState = !!(control && control.invalid && this.submitted);
     return originalErrorState || customErrorState;

ui-ngx/src/app/modules/home/components/filter/filter-predicate-list.component.ts

@@ -18,9 +18,9 @@ import { Component, forwardRef, Inject, Input, OnInit } from '@angular/core';
 import {
   AbstractControl,
   ControlValueAccessor,
-  FormArray,
-  FormBuilder,
-  FormGroup,
+  UntypedFormArray,
+  UntypedFormBuilder,
+  UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   ValidationErrors,
@@ -75,7 +75,7 @@ export class FilterPredicateListComponent implements ControlValueAccessor, Valid
 
   @Input() onlyUserDynamicSource = false;
 
-  filterListFormGroup: FormGroup;
+  filterListFormGroup: UntypedFormGroup;
 
   valueTypeEnum = EntityKeyValueType;
 
@@ -85,7 +85,7 @@ export class FilterPredicateListComponent implements ControlValueAccessor, Valid
 
   private valueChangeSubscription: Subscription = null;
 
-  constructor(private fb: FormBuilder,
+  constructor(private fb: UntypedFormBuilder,
               @Inject(COMPLEX_FILTER_PREDICATE_DIALOG_COMPONENT_TOKEN) private complexFilterPredicateDialogComponent: ComponentType<any>,
               private dialog: MatDialog) {
   }
@@ -96,8 +96,8 @@ export class FilterPredicateListComponent implements ControlValueAccessor, Valid
       this.fb.array([]));
   }
 
-  predicatesFormArray(): FormArray {
-    return this.filterListFormGroup.get('predicates') as FormArray;
+  predicatesFormArray(): UntypedFormArray {
+    return this.filterListFormGroup.get('predicates') as UntypedFormArray;
   }
 
   registerOnChange(fn: any): void {
@@ -144,11 +144,11 @@ export class FilterPredicateListComponent implements ControlValueAccessor, Valid
   }
 
   public removePredicate(index: number) {
-    (this.filterListFormGroup.get('predicates') as FormArray).removeAt(index);
+    (this.filterListFormGroup.get('predicates') as UntypedFormArray).removeAt(index);
   }
 
   public addPredicate(complex: boolean) {
-    const predicatesFormArray = this.filterListFormGroup.get('predicates') as FormArray;
+    const predicatesFormArray = this.filterListFormGroup.get('predicates') as UntypedFormArray;
     const predicate = createDefaultFilterPredicateInfo(this.valueType, complex);
     let observable: Observable<KeyFilterPredicateInfo>;
     if (complex) {

ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.ts

@@ -17,8 +17,8 @@
 import { Component, forwardRef, Input, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
-  FormBuilder,
-  FormGroup,
+  UntypedFormBuilder,
+  UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   ValidationErrors,
@@ -92,7 +92,7 @@ export class FilterPredicateValueComponent implements ControlValueAccessor, Vali
 
   dynamicValueSourceTypeTranslations = dynamicValueSourceTypeTranslationMap;
 
-  filterPredicateValueFormGroup: FormGroup;
+  filterPredicateValueFormGroup: UntypedFormGroup;
 
   dynamicMode = false;
 
@@ -101,7 +101,7 @@ export class FilterPredicateValueComponent implements ControlValueAccessor, Vali
   private propagateChange = null;
   private propagateChangePending = false;
 
-  constructor(private fb: FormBuilder) {
+  constructor(private fb: UntypedFormBuilder) {
   }
 
   ngOnInit(): void {

ui-ngx/src/app/modules/home/components/filter/filter-predicate.component.ts

@@ -17,8 +17,8 @@
 import { Component, forwardRef, Input, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
-  FormBuilder,
-  FormGroup,
+  UntypedFormBuilder,
+  UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   ValidationErrors,
@@ -58,7 +58,7 @@ export class FilterPredicateComponent implements ControlValueAccessor, Validator
 
   @Input() onlyUserDynamicSource = false;
 
-  filterPredicateFormGroup: FormGroup;
+  filterPredicateFormGroup: UntypedFormGroup;
 
   type: FilterPredicateType;
 
@@ -66,7 +66,7 @@ export class FilterPredicateComponent implements ControlValueAccessor, Validator
 
   private propagateChange = null;
 
-  constructor(private fb: FormBuilder) {
+  constructor(private fb: UntypedFormBuilder) {
   }
 
   ngOnInit(): void {

ui-ngx/src/app/modules/home/components/filter/filter-select.component.ts

@@ -17,9 +17,9 @@
 import { AfterViewInit, Component, ElementRef, forwardRef, Input, OnInit, SkipSelf, ViewChild } from '@angular/core';
 import {
   ControlValueAccessor,
-  FormBuilder,
-  FormControl,
-  FormGroup,
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup,
   FormGroupDirective,
   NG_VALUE_ACCESSOR,
   NgForm
@@ -54,7 +54,7 @@ import { Filter } from '@shared/models/query/query.models';
 })
 export class FilterSelectComponent implements ControlValueAccessor, OnInit, AfterViewInit, ErrorStateMatcher {
 
-  selectFilterFormGroup: FormGroup;
+  selectFilterFormGroup: UntypedFormGroup;
 
   modelValue: string | null;
 
@@ -101,7 +101,7 @@ export class FilterSelectComponent implements ControlValueAccessor, OnInit, Afte
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               public translate: TranslateService,
               public truncate: TruncatePipe,
-              private fb: FormBuilder) {
+              private fb: UntypedFormBuilder) {
     this.selectFilterFormGroup = this.fb.group({
       filter: [null]
     });
@@ -140,7 +140,7 @@ export class FilterSelectComponent implements ControlValueAccessor, OnInit, Afte
       );
   }
 
-  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
     const customErrorState = this.tbRequired && !this.modelValue;
     return originalErrorState || customErrorState;

ui-ngx/src/app/modules/home/components/filter/filter-text.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component, forwardRef, Input, OnInit } from '@angular/core';
-import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ControlValueAccessor, UntypedFormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { KeyFilter, keyFiltersToText } from '@shared/models/query/query.models';
 import { TranslateService } from '@ngx-translate/core';
@@ -64,7 +64,7 @@ export class FilterTextComponent implements ControlValueAccessor, OnInit {
   private propagateChange = (v: any) => { };
 
   constructor(private dialog: MatDialog,
-              private fb: FormBuilder,
+              private fb: UntypedFormBuilder,
               private translate: TranslateService,
               private datePipe: DatePipe) {
   }

ui-ngx/src/app/modules/home/components/filter/filter-user-info-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 { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { DialogComponent } from '@app/shared/components/dialog.component';
 import {
@@ -48,7 +48,7 @@ export class FilterUserInfoDialogComponent extends
   DialogComponent<FilterUserInfoDialogComponent, KeyFilterPredicateUserInfo>
   implements OnInit, ErrorStateMatcher {
 
-  filterUserInfoFormGroup: FormGroup;
+  filterUserInfoFormGroup: UntypedFormGroup;
 
   submitted = false;
 
@@ -57,7 +57,7 @@ export class FilterUserInfoDialogComponent extends
               @Inject(MAT_DIALOG_DATA) public data: FilterUserInfoDialogData,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               public dialogRef: MatDialogRef<FilterUserInfoDialogComponent, KeyFilterPredicateUserInfo>,
-              private fb: FormBuilder,
+              private fb: UntypedFormBuilder,
               private translate: TranslateService) {
     super(store, router, dialogRef);
 
@@ -95,7 +95,7 @@ export class FilterUserInfoDialogComponent extends
   ngOnInit(): void {
   }
 
-  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
     const customErrorState = !!(control && control.invalid && this.submitted);
     return originalErrorState || customErrorState;

ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.ts

@@ -21,10 +21,10 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import {
   AbstractControl,
-  FormArray,
-  FormBuilder,
-  FormControl,
-  FormGroup,
+  UntypedFormArray,
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup,
   FormGroupDirective,
   NgForm,
   Validators
@@ -64,7 +64,7 @@ export class FiltersDialogComponent extends DialogComponent<FiltersDialogCompone
 
   filterToWidgetsMap: {[filterId: string]: Array<string>} = {};
 
-  filtersFormGroup: FormGroup;
+  filtersFormGroup: UntypedFormGroup;
 
   submitted = false;
 
@@ -73,7 +73,7 @@ export class FiltersDialogComponent extends DialogComponent<FiltersDialogCompone
               @Inject(MAT_DIALOG_DATA) public data: FiltersDialogData,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               public dialogRef: MatDialogRef<FiltersDialogComponent, Filters>,
-              private fb: FormBuilder,
+              private fb: UntypedFormBuilder,
               private utils: UtilsService,
               private translate: TranslateService,
               private dialogs: DialogService,
@@ -131,14 +131,14 @@ export class FiltersDialogComponent extends DialogComponent<FiltersDialogCompone
   }
 
 
-  filtersFormArray(): FormArray {
-    return this.filtersFormGroup.get('filters') as FormArray;
+  filtersFormArray(): UntypedFormArray {
+    return this.filtersFormGroup.get('filters') as UntypedFormArray;
   }
 
   ngOnInit(): void {
   }
 
-  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
     const customErrorState = !!(control && control.invalid && this.submitted);
     return originalErrorState || customErrorState;
@@ -157,7 +157,7 @@ export class FiltersDialogComponent extends DialogComponent<FiltersDialogCompone
       this.dialogs.alert(this.translate.instant('filter.unable-delete-filter-title'),
         message, this.translate.instant('action.close'), true);
     } else {
-      (this.filtersFormGroup.get('filters') as FormArray).removeAt(index);
+      (this.filtersFormGroup.get('filters') as UntypedFormArray).removeAt(index);
       this.filtersFormGroup.markAsDirty();
     }
   }
@@ -189,10 +189,10 @@ export class FiltersDialogComponent extends DialogComponent<FiltersDialogCompone
     }).afterClosed().subscribe((result) => {
       if (result) {
         if (isAdd) {
-          (this.filtersFormGroup.get('filters') as FormArray)
+          (this.filtersFormGroup.get('filters') as UntypedFormArray)
             .push(this.createFilterFormControl(result.id, result));
         } else {
-          const filterFormControl = (this.filtersFormGroup.get('filters') as FormArray).at(index);
+          const filterFormControl = (this.filtersFormGroup.get('filters') as UntypedFormArray).at(index);
           filterFormControl.get('filter').patchValue(result.filter);
           filterFormControl.get('editable').patchValue(result.editable);
           filterFormControl.get('keyFilters').patchValue(result.keyFilters);

ui-ngx/src/app/modules/home/components/filter/key-filter-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 { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { DialogComponent } from '@app/shared/components/dialog.component';
 import {
@@ -65,7 +65,7 @@ export class KeyFilterDialogComponent extends
   private entityKeysName: Observable<Array<string>>;
   private destroy$ = new Subject();
 
-  keyFilterFormGroup: FormGroup;
+  keyFilterFormGroup: UntypedFormGroup;
 
   entityKeyTypes =
     this.data.telemetryKeysOnly ?
@@ -96,7 +96,7 @@ export class KeyFilterDialogComponent extends
               private deviceProfileService: DeviceProfileService,
               private dialogs: DialogService,
               private translate: TranslateService,
-              private fb: FormBuilder) {
+              private fb: UntypedFormBuilder) {
     super(store, router, dialogRef);
 
     this.keyFilterFormGroup = this.fb.group(
@@ -191,7 +191,7 @@ export class KeyFilterDialogComponent extends
     this.destroy$.complete();
   }
 
-  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
     const customErrorState = !!(control && control.invalid && this.submitted);
     return originalErrorState || customErrorState;

ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.ts

@@ -18,10 +18,10 @@ import { Component, forwardRef, Input, OnInit } from '@angular/core';
 import {
   AbstractControl,
   ControlValueAccessor,
-  FormArray,
-  FormBuilder,
-  FormControl,
-  FormGroup,
+  UntypedFormArray,
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   ValidationErrors,
@@ -69,17 +69,17 @@ export class KeyFilterListComponent implements ControlValueAccessor, Validator,
 
   @Input() entityId: EntityId;
 
-  keyFilterListFormGroup: FormGroup;
+  keyFilterListFormGroup: UntypedFormGroup;
 
   entityKeyTypeTranslations = entityKeyTypeTranslationMap;
 
-  keyFiltersControl: FormControl;
+  keyFiltersControl: UntypedFormControl;
 
   private propagateChange = null;
 
   private valueChangeSubscription: Subscription = null;
 
-  constructor(private fb: FormBuilder,
+  constructor(private fb: UntypedFormBuilder,
               private dialog: MatDialog) {
   }
 
@@ -90,8 +90,8 @@ export class KeyFilterListComponent implements ControlValueAccessor, Validator,
     this.keyFiltersControl = this.fb.control(null);
   }
 
-  keyFiltersFormArray(): FormArray {
-    return this.keyFilterListFormGroup.get('keyFilters') as FormArray;
+  keyFiltersFormArray(): UntypedFormArray {
+    return this.keyFilterListFormGroup.get('keyFilters') as UntypedFormArray;
   }
 
   registerOnChange(fn: any): void {
@@ -142,11 +142,11 @@ export class KeyFilterListComponent implements ControlValueAccessor, Validator,
   }
 
   public removeKeyFilter(index: number) {
-    (this.keyFilterListFormGroup.get('keyFilters') as FormArray).removeAt(index);
+    (this.keyFilterListFormGroup.get('keyFilters') as UntypedFormArray).removeAt(index);
   }
 
   public addKeyFilter() {
-    const keyFiltersFormArray = this.keyFilterListFormGroup.get('keyFilters') as FormArray;
+    const keyFiltersFormArray = this.keyFilterListFormGroup.get('keyFilters') as UntypedFormArray;
     this.openKeyFilterDialog(null).subscribe((result) => {
       if (result) {
         keyFiltersFormArray.push(this.fb.control(result, [Validators.required]));
@@ -156,11 +156,11 @@ export class KeyFilterListComponent implements ControlValueAccessor, Validator,
 
   public editKeyFilter(index: number) {
     const keyFilter: KeyFilterInfo =
-      (this.keyFilterListFormGroup.get('keyFilters') as FormArray).at(index).value;
+      (this.keyFilterListFormGroup.get('keyFilters') as UntypedFormArray).at(index).value;
     this.openKeyFilterDialog(keyFilter).subscribe(
       (result) => {
         if (result) {
-          (this.keyFilterListFormGroup.get('keyFilters') as FormArray).at(index).patchValue(result);
+          (this.keyFilterListFormGroup.get('keyFilters') as UntypedFormArray).at(index).patchValue(result);
         }
       }
     );

ui-ngx/src/app/modules/home/components/filter/numeric-filter-predicate.component.ts

@@ -17,8 +17,8 @@
 import { Component, forwardRef, Input, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
-  FormBuilder,
-  FormGroup,
+  UntypedFormBuilder,
+  UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   ValidationErrors,
@@ -60,7 +60,7 @@ export class NumericFilterPredicateComponent implements ControlValueAccessor, Va
 
   @Input() valueType: EntityKeyValueType;
 
-  numericFilterPredicateFormGroup: FormGroup;
+  numericFilterPredicateFormGroup: UntypedFormGroup;
 
   valueTypeEnum = EntityKeyValueType;
 
@@ -70,7 +70,7 @@ export class NumericFilterPredicateComponent implements ControlValueAccessor, Va
 
   private propagateChange = null;
 
-  constructor(private fb: FormBuilder) {
+  constructor(private fb: UntypedFormBuilder) {
   }
 
   ngOnInit(): void {

ui-ngx/src/app/modules/home/components/filter/string-filter-predicate.component.ts

@@ -17,8 +17,8 @@
 import { Component, forwardRef, Input, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
-  FormBuilder,
-  FormGroup,
+  UntypedFormBuilder,
+  UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   ValidationErrors,
@@ -60,7 +60,7 @@ export class StringFilterPredicateComponent implements ControlValueAccessor, Val
 
   valueTypeEnum = EntityKeyValueType;
 
-  stringFilterPredicateFormGroup: FormGroup;
+  stringFilterPredicateFormGroup: UntypedFormGroup;
 
   stringOperations = Object.keys(StringOperation);
   stringOperationEnum = StringOperation;
@@ -68,7 +68,7 @@ export class StringFilterPredicateComponent implements ControlValueAccessor, Val
 
   private propagateChange = null;
 
-  constructor(private fb: FormBuilder) {
+  constructor(private fb: UntypedFormBuilder) {
   }
 
   ngOnInit(): void {

ui-ngx/src/app/modules/home/components/filter/user-filter-dialog.component.ts

@@ -20,10 +20,10 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import {
-  AbstractControl, FormArray,
-  FormBuilder,
-  FormControl,
-  FormGroup,
+  AbstractControl, UntypedFormArray,
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup,
   FormGroupDirective,
   NgForm,
   Validators
@@ -54,7 +54,7 @@ export class UserFilterDialogComponent extends DialogComponent<UserFilterDialogC
 
   filter: Filter;
 
-  userFilterFormGroup: FormGroup;
+  userFilterFormGroup: UntypedFormGroup;
 
   valueTypeEnum = EntityKeyValueType;
 
@@ -65,7 +65,7 @@ export class UserFilterDialogComponent extends DialogComponent<UserFilterDialogC
               @Inject(MAT_DIALOG_DATA) public data: UserFilterDialogData,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               public dialogRef: MatDialogRef<UserFilterDialogComponent, Filter>,
-              private fb: FormBuilder,
+              private fb: UntypedFormBuilder,
               public translate: TranslateService) {
     super(store, router, dialogRef);
     this.filter = data.filter;
@@ -97,14 +97,14 @@ export class UserFilterDialogComponent extends DialogComponent<UserFilterDialogC
     return userInputControl;
   }
 
-  userInputsFormArray(): FormArray {
-    return this.userFilterFormGroup.get('userInputs') as FormArray;
+  userInputsFormArray(): UntypedFormArray {
+    return this.userFilterFormGroup.get('userInputs') as UntypedFormArray;
   }
 
   ngOnInit(): void {
   }
 
-  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
     const customErrorState = !!(control && control.invalid && this.submitted);
     return originalErrorState || customErrorState;

ui-ngx/src/app/modules/home/components/import-export/import-dialog-csv.component.ts

@@ -18,7 +18,7 @@ import { AfterViewInit, Component, ElementRef, Inject, OnDestroy, Renderer2, Vie
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { DialogComponent } from '@app/shared/components/dialog.component';
 import { EntityType } from '@shared/models/entity-type.models';
@@ -84,9 +84,9 @@ export class ImportDialogCsvComponent extends DialogComponent<ImportDialogCsvCom
 
   selectedIndex = 0;
 
-  selectFileFormGroup: FormGroup;
-  importParametersFormGroup: FormGroup;
-  columnTypesFormGroup: FormGroup;
+  selectFileFormGroup: UntypedFormGroup;
+  importParametersFormGroup: UntypedFormGroup;
+  columnTypesFormGroup: UntypedFormGroup;
 
   isImportData = false;
   statistical: BulkImportResult;
@@ -103,7 +103,7 @@ export class ImportDialogCsvComponent extends DialogComponent<ImportDialogCsvCom
               public dialogRef: MatDialogRef<ImportDialogCsvComponent, boolean>,
               public translate: TranslateService,
               private importExport: ImportExportService,
-              private fb: FormBuilder,
+              private fb: UntypedFormBuilder,
               private renderer: Renderer2) {
     super(store, router, dialogRef);
     this.entityType = data.entityType;

ui-ngx/src/app/modules/home/components/import-export/import-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 { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { DialogComponent } from '@app/shared/components/dialog.component';
 import { ActionNotificationShow } from '@core/notification/notification.actions';
@@ -41,7 +41,7 @@ export class ImportDialogComponent extends DialogComponent<ImportDialogComponent
   importTitle: string;
   importFileLabel: string;
 
-  importFormGroup: FormGroup;
+  importFormGroup: UntypedFormGroup;
 
   submitted = false;
 
@@ -50,7 +50,7 @@ export class ImportDialogComponent extends DialogComponent<ImportDialogComponent
               @Inject(MAT_DIALOG_DATA) public data: ImportDialogData,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               public dialogRef: MatDialogRef<ImportDialogComponent>,
-              private fb: FormBuilder) {
+              private fb: UntypedFormBuilder) {
     super(store, router, dialogRef);
     this.importTitle = data.importTitle;
     this.importFileLabel = data.importFileLabel;
@@ -63,7 +63,7 @@ export class ImportDialogComponent extends DialogComponent<ImportDialogComponent
   ngOnInit(): void {
   }
 
-  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
     const customErrorState = !!(control && control.invalid && this.submitted);
     return originalErrorState || customErrorState;

ui-ngx/src/app/modules/home/components/import-export/table-columns-assignment.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component, ElementRef, forwardRef, Input, OnInit } from '@angular/core';
-import { ControlValueAccessor, FormControl, NG_VALIDATORS, NG_VALUE_ACCESSOR, Validator } from '@angular/forms';
+import { ControlValueAccessor, UntypedFormControl, NG_VALIDATORS, NG_VALUE_ACCESSOR, Validator } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { EntityType } from '@shared/models/entity-type.models';
@@ -198,7 +198,7 @@ export class TableColumnsAssignmentComponent implements OnInit, ControlValueAcce
     }
   }
 
-  public validate(c: FormControl) {
+  public validate(c: UntypedFormControl) {
     return (this.valid) ? null : {
       columnsInvalid: true
     };

ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.ts

@@ -27,7 +27,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 { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { DialogComponent } from '@shared/components/dialog.component';
 import { Router } from '@angular/router';
 import {
@@ -84,13 +84,13 @@ export class AddDeviceProfileDialogComponent extends
 
   deviceTransportTypeTranslations = deviceTransportTypeTranslationMap;
 
-  deviceProfileDetailsFormGroup: FormGroup;
+  deviceProfileDetailsFormGroup: UntypedFormGroup;
 
-  transportConfigFormGroup: FormGroup;
+  transportConfigFormGroup: UntypedFormGroup;
 
-  alarmRulesFormGroup: FormGroup;
+  alarmRulesFormGroup: UntypedFormGroup;
 
-  provisionConfigFormGroup: FormGroup;
+  provisionConfigFormGroup: UntypedFormGroup;
 
   serviceType = ServiceType.TB_RULE_ENGINE;
 
@@ -104,7 +104,7 @@ export class AddDeviceProfileDialogComponent extends
               private injector: Injector,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               private deviceProfileService: DeviceProfileService,
-              private fb: FormBuilder) {
+              private fb: UntypedFormBuilder) {
     super(store, router, dialogRef);
     this.deviceProfileDetailsFormGroup = this.fb.group(
       {
@@ -169,7 +169,7 @@ export class AddDeviceProfileDialogComponent extends
     }
   }
 
-  selectedForm(): FormGroup {
+  selectedForm(): UntypedFormGroup {
     switch (this.selectedIndex) {
       case 0:
         return this.deviceProfileDetailsFormGroup;

ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component, forwardRef, Input, OnInit } from '@angular/core';
-import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
+import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 import {
   DynamicValueSourceType,
   dynamicValueSourceTypeTranslationMap,
@@ -68,7 +68,7 @@ export class AlarmDurationPredicateValueComponent implements ControlValueAccesso
 
   dynamicValueSourceTypeTranslations = dynamicValueSourceTypeTranslationMap;
 
-  alarmDurationPredicateValueFormGroup: FormGroup;
+  alarmDurationPredicateValueFormGroup: UntypedFormGroup;
 
   dynamicMode = false;
 
@@ -76,7 +76,7 @@ export class AlarmDurationPredicateValueComponent implements ControlValueAccesso
 
   private propagateChange = null;
 
-  constructor(private fb: FormBuilder) {
+  constructor(private fb: UntypedFormBuilder) {
   }
 
   ngOnInit(): void {

ui-ngx/src/app/modules/home/components/profile/alarm/alarm-dynamic-value.component.ts

@@ -17,8 +17,8 @@
 import { Component, forwardRef, Input, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
-  FormBuilder,
-  FormGroup,
+  UntypedFormBuilder,
+  UntypedFormGroup,
   NG_VALUE_ACCESSOR,
 } from '@angular/forms';
 import {
@@ -38,7 +38,7 @@ import {
 })
 
 export class AlarmDynamicValue implements ControlValueAccessor, OnInit{
-  public dynamicValue: FormGroup;
+  public dynamicValue: UntypedFormGroup;
   public dynamicValueSourceTypes: DynamicValueSourceType[] = getDynamicSourcesForAllowUser(false);
   public dynamicValueSourceTypeTranslations = dynamicValueSourceTypeTranslationMap;
   private propagateChange = (v: any) => { };
@@ -49,7 +49,7 @@ export class AlarmDynamicValue implements ControlValueAccessor, OnInit{
   @Input()
   disabled: boolean;
 
-  constructor(private fb: FormBuilder) {
+  constructor(private fb: UntypedFormBuilder) {
   }
 
   ngOnInit(): void {

ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-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 { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { DialogComponent } from '@app/shared/components/dialog.component';
 import { TranslateService } from '@ngx-translate/core';
@@ -52,7 +52,7 @@ export class AlarmRuleConditionDialogComponent extends DialogComponent<AlarmRule
   condition = this.data.condition;
   entityId = this.data.entityId;
 
-  conditionFormGroup: FormGroup;
+  conditionFormGroup: UntypedFormGroup;
 
   submitted = false;
 
@@ -61,7 +61,7 @@ export class AlarmRuleConditionDialogComponent extends DialogComponent<AlarmRule
               @Inject(MAT_DIALOG_DATA) public data: AlarmRuleConditionDialogData,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               public dialogRef: MatDialogRef<AlarmRuleConditionDialogComponent, AlarmCondition>,
-              private fb: FormBuilder,
+              private fb: UntypedFormBuilder,
               public translate: TranslateService) {
     super(store, router, dialogRef);
 
@@ -87,7 +87,7 @@ export class AlarmRuleConditionDialogComponent extends DialogComponent<AlarmRule
   ngOnInit(): void {
   }
 
-  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
     const customErrorState = !!(control && control.invalid && this.submitted);
     return originalErrorState || customErrorState;

ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition.component.ts

@@ -17,9 +17,9 @@
 import { Component, forwardRef, Input, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
-  FormBuilder,
-  FormControl,
-  FormGroup,
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   Validator,
@@ -62,7 +62,7 @@ export class AlarmRuleConditionComponent implements ControlValueAccessor, OnInit
   @Input()
   deviceProfileId: EntityId;
 
-  alarmRuleConditionFormGroup: FormGroup;
+  alarmRuleConditionFormGroup: UntypedFormGroup;
 
   specText = '';
 
@@ -71,7 +71,7 @@ export class AlarmRuleConditionComponent implements ControlValueAccessor, OnInit
   private propagateChange = (v: any) => { };
 
   constructor(private dialog: MatDialog,
-              private fb: FormBuilder,
+              private fb: UntypedFormBuilder,
               private translate: TranslateService) {
   }
 
@@ -110,7 +110,7 @@ export class AlarmRuleConditionComponent implements ControlValueAccessor, OnInit
     return this.modelValue && this.modelValue.condition.length;
   }
 
-  public validate(c: FormControl) {
+  public validate(c: UntypedFormControl) {
     return this.conditionSet() ? null : {
       alarmRuleCondition: {
         valid: false,

ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.ts

@@ -17,9 +17,9 @@
 import { Component, forwardRef, Input, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
-  FormBuilder,
-  FormControl,
-  FormGroup,
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   Validator,
@@ -73,7 +73,7 @@ export class AlarmRuleComponent implements ControlValueAccessor, OnInit, Validat
 
   private modelValue: AlarmRule;
 
-  alarmRuleFormGroup: FormGroup;
+  alarmRuleFormGroup: UntypedFormGroup;
 
   expandAlarmDetails = false;
 
@@ -81,7 +81,7 @@ export class AlarmRuleComponent implements ControlValueAccessor, OnInit, Validat
 
   constructor(private dialog: MatDialog,
               private utils: UtilsService,
-              private fb: FormBuilder) {
+              private fb: UntypedFormBuilder) {
   }
 
   registerOnChange(fn: any): void {
@@ -140,7 +140,7 @@ export class AlarmRuleComponent implements ControlValueAccessor, OnInit, Validat
     });
   }
 
-  public validate(c: FormControl) {
+  public validate(c: UntypedFormControl) {
     return (!this.required && !this.modelValue || this.alarmRuleFormGroup.valid) ? null : {
       alarmRule: {
         valid: false,

ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-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 { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, FormGroupDirective, NgForm } from '@angular/forms';
 import { Router } from '@angular/router';
 import { DialogComponent } from '@app/shared/components/dialog.component';
 import { UtilsService } from '@core/services/utils.service';
@@ -43,7 +43,7 @@ export class AlarmScheduleDialogComponent extends DialogComponent<AlarmScheduleD
   readonly = this.data.readonly;
   alarmSchedule = this.data.alarmSchedule;
 
-  alarmScheduleFormGroup: FormGroup;
+  alarmScheduleFormGroup: UntypedFormGroup;
 
   submitted = false;
 
@@ -52,7 +52,7 @@ export class AlarmScheduleDialogComponent extends DialogComponent<AlarmScheduleD
               @Inject(MAT_DIALOG_DATA) public data: AlarmScheduleDialogData,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               public dialogRef: MatDialogRef<AlarmScheduleDialogComponent, AlarmSchedule>,
-              private fb: FormBuilder,
+              private fb: UntypedFormBuilder,
               private utils: UtilsService,
               public translate: TranslateService) {
     super(store, router, dialogRef);
@@ -68,7 +68,7 @@ export class AlarmScheduleDialogComponent extends DialogComponent<AlarmScheduleD
   ngOnInit(): void {
   }
 
-  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
     const customErrorState = !!(control && control.invalid && this.submitted);
     return originalErrorState || customErrorState;

ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.ts

@@ -18,10 +18,10 @@ import { Component, forwardRef, Input, OnInit } from '@angular/core';
 import {
   AbstractControl,
   ControlValueAccessor,
-  FormArray,
-  FormBuilder,
-  FormControl,
-  FormGroup,
+  UntypedFormArray,
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   ValidationErrors,
@@ -59,7 +59,7 @@ export class AlarmScheduleComponent implements ControlValueAccessor, Validator,
   @Input()
   disabled: boolean;
 
-  alarmScheduleForm: FormGroup;
+  alarmScheduleForm: UntypedFormGroup;
 
   alarmScheduleTypes = Object.keys(AlarmScheduleType);
   alarmScheduleType = AlarmScheduleType;
@@ -80,7 +80,7 @@ export class AlarmScheduleComponent implements ControlValueAccessor, Validator,
 
   private propagateChange = (v: any) => { };
 
-  constructor(private fb: FormBuilder) {
+  constructor(private fb: UntypedFormBuilder) {
   }
 
   ngOnInit(): void {
@@ -190,7 +190,7 @@ export class AlarmScheduleComponent implements ControlValueAccessor, Validator,
     this.updateValidators(this.modelValue.type);
   }
 
-  validate(control: FormGroup): ValidationErrors | null {
+  validate(control: UntypedFormGroup): ValidationErrors | null {
     return this.alarmScheduleForm.valid ? null : {
       alarmScheduler: {
         valid: false
@@ -198,8 +198,8 @@ export class AlarmScheduleComponent implements ControlValueAccessor, Validator,
     };
   }
 
-  weeklyRepeatControl(index: number): FormControl {
-    return (this.alarmScheduleForm.get('daysOfWeek') as FormArray).at(index) as FormControl;
+  weeklyRepeatControl(index: number): UntypedFormControl {
+    return (this.alarmScheduleForm.get('daysOfWeek') as UntypedFormArray).at(index) as UntypedFormControl;
   }
 
   private updateValidators(type: AlarmScheduleType, changedType = false){
@@ -256,7 +256,7 @@ export class AlarmScheduleComponent implements ControlValueAccessor, Validator,
   }
 
 
-  private defaultItemsScheduler(index): FormGroup {
+  private defaultItemsScheduler(index): UntypedFormGroup {
     return this.fb.group({
       enabled: [true],
       dayOfWeek: [index + 1],
@@ -280,11 +280,11 @@ export class AlarmScheduleComponent implements ControlValueAccessor, Validator,
     }
   }
 
-  getSchedulerRangeText(control: FormGroup | AbstractControl): string {
+  getSchedulerRangeText(control: UntypedFormGroup | AbstractControl): string {
     return getAlarmScheduleRangeText(control.get('startsOn').value, control.get('endsOn').value);
   }
 
-  get itemsSchedulerForm(): FormArray {
-    return this.alarmScheduleForm.get('items') as FormArray;
+  get itemsSchedulerForm(): UntypedFormArray {
+    return this.alarmScheduleForm.get('items') as UntypedFormArray;
   }
 }

ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.ts

@@ -18,10 +18,10 @@ import { Component, forwardRef, Input, OnInit } from '@angular/core';
 import {
   AbstractControl,
   ControlValueAccessor,
-  FormArray,
-  FormBuilder,
-  FormControl,
-  FormGroup,
+  UntypedFormArray,
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR, ValidationErrors,
   Validator,
@@ -63,7 +63,7 @@ export class CreateAlarmRulesComponent implements ControlValueAccessor, OnInit,
   @Input()
   deviceProfileId: EntityId;
 
-  createAlarmRulesFormGroup: FormGroup;
+  createAlarmRulesFormGroup: UntypedFormGroup;
 
   private usedSeverities: AlarmSeverity[] = [];
 
@@ -72,7 +72,7 @@ export class CreateAlarmRulesComponent implements ControlValueAccessor, OnInit,
   private propagateChange = (v: any) => { };
 
   constructor(private dialog: MatDialog,
-              private fb: FormBuilder) {
+              private fb: UntypedFormBuilder) {
   }
 
   registerOnChange(fn: any): void {
@@ -88,8 +88,8 @@ export class CreateAlarmRulesComponent implements ControlValueAccessor, OnInit,
     });
   }
 
-  createAlarmRulesFormArray(): FormArray {
-    return this.createAlarmRulesFormGroup.get('createAlarmRules') as FormArray;
+  createAlarmRulesFormArray(): UntypedFormArray {
+    return this.createAlarmRulesFormGroup.get('createAlarmRules') as UntypedFormArray;
   }
 
   setDisabledState(isDisabled: boolean): void {
@@ -134,7 +134,7 @@ export class CreateAlarmRulesComponent implements ControlValueAccessor, OnInit,
   }
 
   public removeCreateAlarmRule(index: number) {
-    (this.createAlarmRulesFormGroup.get('createAlarmRules') as FormArray).removeAt(index);
+    (this.createAlarmRulesFormGroup.get('createAlarmRules') as UntypedFormArray).removeAt(index);
   }
 
   public addCreateAlarmRule() {
@@ -143,7 +143,7 @@ export class CreateAlarmRulesComponent implements ControlValueAccessor, OnInit,
         condition: []
       }
     };
-    const createAlarmRulesArray = this.createAlarmRulesFormGroup.get('createAlarmRules') as FormArray;
+    const createAlarmRulesArray = this.createAlarmRulesFormGroup.get('createAlarmRules') as UntypedFormArray;
     createAlarmRulesArray.push(this.fb.group({
       severity: [this.getFirstUnusedSeverity(), Validators.required],
       alarmRule: [createAlarmRule, alarmRuleValidator]
@@ -164,7 +164,7 @@ export class CreateAlarmRulesComponent implements ControlValueAccessor, OnInit,
     return null;
   }
 
-  public validate(c: FormControl) {
+  public validate(c: UntypedFormControl) {
     return (this.createAlarmRulesFormGroup.valid) ? null : {
       createAlarmRules: {
         valid: false,

ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.ts

@@ -17,9 +17,9 @@
 import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core';
 import {
   ControlValueAccessor,
-  FormBuilder,
-  FormControl,
-  FormGroup,
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   Validator,
@@ -67,14 +67,14 @@ export class DeviceProfileAlarmComponent implements ControlValueAccessor, OnInit
 
   private modelValue: DeviceProfileAlarm;
 
-  alarmFormGroup: FormGroup;
+  alarmFormGroup: UntypedFormGroup;
 
   private propagateChange = null;
   private propagateChangePending = false;
 
   constructor(private dialog: MatDialog,
               private utils: UtilsService,
-              private fb: FormBuilder) {
+              private fb: UntypedFormBuilder) {
   }
 
   registerOnChange(fn: any): void {
@@ -140,7 +140,7 @@ export class DeviceProfileAlarmComponent implements ControlValueAccessor, OnInit
     this.alarmFormGroup.patchValue({clearRule: null});
   }
 
-  public validate(c: FormControl) {
+  public validate(c: UntypedFormControl) {
     if (c.parent) {
       const alarmType = c.value.alarmType;
       const profileAlarmsType = [];

ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.ts

@@ -18,10 +18,10 @@ import { Component, forwardRef, Input, OnInit } from '@angular/core';
 import {
   AbstractControl,
   ControlValueAccessor,
-  FormArray,
-  FormBuilder,
-  FormControl,
-  FormGroup,
+  UntypedFormArray,
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   Validator,
@@ -55,7 +55,7 @@ import { EntityId } from '@shared/models/id/entity-id';
 })
 export class DeviceProfileAlarmsComponent implements ControlValueAccessor, OnInit, Validator {
 
-  deviceProfileAlarmsFormGroup: FormGroup;
+  deviceProfileAlarmsFormGroup: UntypedFormGroup;
 
   private requiredValue: boolean;
   get required(): boolean {
@@ -77,7 +77,7 @@ export class DeviceProfileAlarmsComponent implements ControlValueAccessor, OnIni
   private propagateChange = (v: any) => { };
 
   constructor(private store: Store<AppState>,
-              private fb: FormBuilder,
+              private fb: UntypedFormBuilder,
               private dialog: MatDialog) {
   }
 
@@ -94,8 +94,8 @@ export class DeviceProfileAlarmsComponent implements ControlValueAccessor, OnIni
     });
   }
 
-  alarmsFormArray(): FormArray {
-    return this.deviceProfileAlarmsFormGroup.get('alarms') as FormArray;
+  alarmsFormArray(): UntypedFormArray {
+    return this.deviceProfileAlarmsFormGroup.get('alarms') as UntypedFormArray;
   }
 
   setDisabledState(isDisabled: boolean): void {
@@ -137,7 +137,7 @@ export class DeviceProfileAlarmsComponent implements ControlValueAccessor, OnIni
   }
 
   public removeAlarm(index: number) {
-    (this.deviceProfileAlarmsFormGroup.get('alarms') as FormArray).removeAt(index);
+    (this.deviceProfileAlarmsFormGroup.get('alarms') as UntypedFormArray).removeAt(index);
   }
 
   public addAlarm() {
@@ -152,7 +152,7 @@ export class DeviceProfileAlarmsComponent implements ControlValueAccessor, OnIni
         }
       }
     };
-    const alarmsArray = this.deviceProfileAlarmsFormGroup.get('alarms') as FormArray;
+    const alarmsArray = this.deviceProfileAlarmsFormGroup.get('alarms') as UntypedFormArray;
     alarmsArray.push(this.fb.control(alarm, [deviceProfileAlarmValidator]));
     this.deviceProfileAlarmsFormGroup.updateValueAndValidity();
     if (!this.deviceProfileAlarmsFormGroup.valid) {
@@ -160,7 +160,7 @@ export class DeviceProfileAlarmsComponent implements ControlValueAccessor, OnIni
     }
   }
 
-  public validate(c: FormControl) {
+  public validate(c: UntypedFormControl) {
     return (this.deviceProfileAlarmsFormGroup.valid) ? null : {
       alarms: {
         valid: false,

ui-ngx/src/app/modules/home/components/profile/alarm/edit-alarm-details-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 { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, FormGroupDirective, NgForm } from '@angular/forms';
 import { Router } from '@angular/router';
 import { DialogComponent } from '@app/shared/components/dialog.component';
 import { UtilsService } from '@core/services/utils.service';
@@ -41,7 +41,7 @@ export class EditAlarmDetailsDialogComponent extends DialogComponent<EditAlarmDe
 
   alarmDetails = this.data.alarmDetails;
 
-  editDetailsFormGroup: FormGroup;
+  editDetailsFormGroup: UntypedFormGroup;
 
   submitted = false;
 
@@ -50,7 +50,7 @@ export class EditAlarmDetailsDialogComponent extends DialogComponent<EditAlarmDe
               @Inject(MAT_DIALOG_DATA) public data: EditAlarmDetailsDialogData,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               public dialogRef: MatDialogRef<EditAlarmDetailsDialogComponent, string>,
-              private fb: FormBuilder,
+              private fb: UntypedFormBuilder,
               private utils: UtilsService,
               public translate: TranslateService) {
     super(store, router, dialogRef);
@@ -66,7 +66,7 @@ export class EditAlarmDetailsDialogComponent extends DialogComponent<EditAlarmDe
   ngOnInit(): void {
   }
 
-  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
     const customErrorState = !!(control && control.invalid && this.submitted);
     return originalErrorState || customErrorState;

ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.ts

@@ -25,7 +25,7 @@ import {
   Output,
   ViewChild
 } from '@angular/core';
-import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Observable, of } from 'rxjs';
 import { PageLink } from '@shared/models/page/page-link';
 import { Direction } from '@shared/models/page/sort-order';
@@ -58,7 +58,7 @@ import { AssetProfileDialogComponent, AssetProfileDialogData } from './asset-pro
 })
 export class AssetProfileAutocompleteComponent implements ControlValueAccessor, OnInit {
 
-  selectAssetProfileFormGroup: FormGroup;
+  selectAssetProfileFormGroup: UntypedFormGroup;
 
   modelValue: AssetProfileId | null;
 
@@ -125,7 +125,7 @@ export class AssetProfileAutocompleteComponent implements ControlValueAccessor,
               public translate: TranslateService,
               public truncate: TruncatePipe,
               private assetProfileService: AssetProfileService,
-              private fb: FormBuilder,
+              private fb: UntypedFormBuilder,
               private zone: NgZone,
               private dialog: MatDialog) {
     this.selectAssetProfileFormGroup = this.fb.group({

ui-ngx/src/app/modules/home/components/profile/asset-profile-dialog.component.ts

@@ -27,7 +27,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 { UntypedFormControl, FormGroupDirective, NgForm } from '@angular/forms';
 import { DialogComponent } from '@shared/components/dialog.component';
 import { Router } from '@angular/router';
 import { AssetProfile } from '@shared/models/asset.models';
@@ -76,7 +76,7 @@ export class AssetProfileDialogComponent extends
     }
   }
 
-  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
     const customErrorState = !!(control && control.invalid && this.submitted);
     return originalErrorState || customErrorState;

ui-ngx/src/app/modules/home/components/profile/asset-profile.component.ts

@@ -17,7 +17,7 @@
 import { ChangeDetectorRef, Component, Inject, Input, Optional } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { ActionNotificationShow } from '@app/core/notification/notification.actions';
 import { TranslateService } from '@ngx-translate/core';
 import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
@@ -54,7 +54,7 @@ export class AssetProfileComponent extends EntityComponent<AssetProfile> {
               protected translate: TranslateService,
               @Optional() @Inject('entity') protected entityValue: AssetProfile,
               @Optional() @Inject('entitiesTableConfig') protected entitiesTableConfigValue: EntityTableConfig<AssetProfile>,
-              protected fb: FormBuilder,
+              protected fb: UntypedFormBuilder,
               protected cd: ChangeDetectorRef) {
     super(store, fb, entityValue, entitiesTableConfigValue, cd);
   }
@@ -67,7 +67,7 @@ export class AssetProfileComponent extends EntityComponent<AssetProfile> {
     }
   }
 
-  buildForm(entity: AssetProfile): FormGroup {
+  buildForm(entity: AssetProfile): UntypedFormGroup {
     this.assetProfileId = entity?.id ? entity.id : null;
     const form = this.fb.group(
       {

ui-ngx/src/app/modules/home/components/profile/device-profile-autocomplete.component.ts

@@ -27,7 +27,7 @@ import {
   SimpleChanges,
   ViewChild
 } from '@angular/core';
-import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Observable, of } from 'rxjs';
 import { PageLink } from '@shared/models/page/page-link';
 import { Direction } from '@shared/models/page/sort-order';
@@ -61,7 +61,7 @@ import { getEntityDetailsPageURL } from '@core/utils';
 })
 export class DeviceProfileAutocompleteComponent implements ControlValueAccessor, OnInit, OnChanges {
 
-  selectDeviceProfileFormGroup: FormGroup;
+  selectDeviceProfileFormGroup: UntypedFormGroup;
 
   modelValue: DeviceProfileId | null;
 
@@ -133,7 +133,7 @@ export class DeviceProfileAutocompleteComponent implements ControlValueAccessor,
               public translate: TranslateService,
               public truncate: TruncatePipe,
               private deviceProfileService: DeviceProfileService,
-              private fb: FormBuilder,
+              private fb: UntypedFormBuilder,
               private zone: NgZone,
               private dialog: MatDialog) {
     this.selectDeviceProfileFormGroup = this.fb.group({

ui-ngx/src/app/modules/home/components/profile/device-profile-dialog.component.ts

@@ -27,7 +27,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 { UntypedFormControl, FormGroupDirective, NgForm } from '@angular/forms';
 import { DialogComponent } from '@shared/components/dialog.component';
 import { Router } from '@angular/router';
 import { DeviceProfile } from '@shared/models/device.models';
@@ -76,7 +76,7 @@ export class DeviceProfileDialogComponent extends
     }
   }
 
-  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
     const customErrorState = !!(control && control.invalid && this.submitted);
     return originalErrorState || customErrorState;

ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.ts

@@ -17,9 +17,9 @@
 import { Component, forwardRef, Input, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
-  FormBuilder,
-  FormControl,
-  FormGroup,
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   ValidationErrors,
@@ -57,7 +57,7 @@ import { TranslateService } from '@ngx-translate/core';
 })
 export class DeviceProfileProvisionConfigurationComponent implements ControlValueAccessor, OnInit, Validator {
 
-  provisionConfigurationFormGroup: FormGroup;
+  provisionConfigurationFormGroup: UntypedFormGroup;
 
   deviceProvisionType = DeviceProvisionType;
   deviceProvisionTypes = Object.keys(DeviceProvisionType);
@@ -78,7 +78,7 @@ export class DeviceProfileProvisionConfigurationComponent implements ControlValu
   private propagateChange = (v: any) => { };
 
   constructor(protected store: Store<AppState>,
-              private fb: FormBuilder,
+              private fb: UntypedFormBuilder,
               private translate: TranslateService) {
   }
 
@@ -140,7 +140,7 @@ export class DeviceProfileProvisionConfigurationComponent implements ControlValu
     }
   }
 
-  validate(c: FormControl): ValidationErrors | null {
+  validate(c: UntypedFormControl): ValidationErrors | null {
     return (this.provisionConfigurationFormGroup.valid) ? null : {
       provisionConfiguration: {
         valid: false,

ui-ngx/src/app/modules/home/components/profile/device-profile.component.ts

@@ -17,7 +17,7 @@
 import { ChangeDetectorRef, Component, Inject, Input, Optional } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { ActionNotificationShow } from '@app/core/notification/notification.actions';
 import { TranslateService } from '@ngx-translate/core';
 import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
@@ -82,7 +82,7 @@ export class DeviceProfileComponent extends EntityComponent<DeviceProfile> {
               protected translate: TranslateService,
               @Optional() @Inject('entity') protected entityValue: DeviceProfile,
               @Optional() @Inject('entitiesTableConfig') protected entitiesTableConfigValue: EntityTableConfig<DeviceProfile>,
-              protected fb: FormBuilder,
+              protected fb: UntypedFormBuilder,
               protected cd: ChangeDetectorRef) {
     super(store, fb, entityValue, entitiesTableConfigValue, cd);
   }
@@ -95,7 +95,7 @@ export class DeviceProfileComponent extends EntityComponent<DeviceProfile> {
     }
   }
 
-  buildForm(entity: DeviceProfile): FormGroup {
+  buildForm(entity: DeviceProfile): UntypedFormGroup {
     this.deviceProfileId = entity?.id ? entity.id : null;
     this.displayProfileConfiguration = entity && entity.type &&
       deviceProfileTypeConfigurationInfoMap.get(entity.type).hasProfileConfiguration;
@@ -137,7 +137,7 @@ export class DeviceProfileComponent extends EntityComponent<DeviceProfile> {
     return form;
   }
 
-  private checkIsNewDeviceProfile(entity: DeviceProfile, form: FormGroup) {
+  private checkIsNewDeviceProfile(entity: DeviceProfile, form: UntypedFormGroup) {
     if (entity && !entity.id) {
       form.get('type').patchValue(DeviceProfileType.DEFAULT, {emitEvent: true});
       form.get('transportType').patchValue(DeviceTransportType.DEFAULT, {emitEvent: true});
@@ -145,7 +145,7 @@ export class DeviceProfileComponent extends EntityComponent<DeviceProfile> {
     }
   }
 
-  private deviceProfileTypeChanged(form: FormGroup) {
+  private deviceProfileTypeChanged(form: UntypedFormGroup) {
     const deviceProfileType: DeviceProfileType = form.get('type').value;
     this.displayProfileConfiguration = deviceProfileType &&
       deviceProfileTypeConfigurationInfoMap.get(deviceProfileType).hasProfileConfiguration;
@@ -160,7 +160,7 @@ export class DeviceProfileComponent extends EntityComponent<DeviceProfile> {
     form.patchValue({profileData});
   }
 
-  private deviceProfileTransportTypeChanged(form: FormGroup) {
+  private deviceProfileTransportTypeChanged(form: UntypedFormGroup) {
     const deviceTransportType: DeviceTransportType = form.get('transportType').value;
     this.displayTransportConfiguration = deviceTransportType &&
       deviceTransportTypeConfigurationInfoMap.get(deviceTransportType).hasProfileConfiguration;

ui-ngx/src/app/modules/home/components/profile/device/coap-device-profile-transport-configuration.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
-import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
+import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@app/core/core.state';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
@@ -55,7 +55,7 @@ export class CoapDeviceProfileTransportConfigurationComponent implements Control
   transportPayloadTypes = Object.values(TransportPayloadType);
   transportPayloadTypeTranslations = transportPayloadTypeTranslationMap;
 
-  coapTransportConfigurationFormGroup: FormGroup;
+  coapTransportConfigurationFormGroup: UntypedFormGroup;
 
   private destroy$ = new Subject();
   private requiredValue: boolean;
@@ -83,7 +83,7 @@ export class CoapDeviceProfileTransportConfigurationComponent implements Control
   private propagateChange = (v: any) => { };
 
   constructor(private store: Store<AppState>,
-              private fb: FormBuilder) {
+              private fb: UntypedFormBuilder) {
   }
 
   registerOnChange(fn: any): void {
@@ -134,13 +134,13 @@ export class CoapDeviceProfileTransportConfigurationComponent implements Control
     return transportPayloadType === TransportPayloadType.PROTOBUF;
   }
 
-  get clientSettingsFormGroup(): FormGroup {
-    return this.coapTransportConfigurationFormGroup.get('clientSettings') as FormGroup;
+  get clientSettingsFormGroup(): UntypedFormGroup {
+    return this.coapTransportConfigurationFormGroup.get('clientSettings') as UntypedFormGroup;
   }
 
   private updateCoapDeviceTypeBasedControls(type: CoapTransportDeviceType, forceUpdated = false) {
     const coapDeviceTypeConfigurationFormGroup = this.coapTransportConfigurationFormGroup
-      .get('coapDeviceTypeConfiguration') as FormGroup;
+      .get('coapDeviceTypeConfiguration') as UntypedFormGroup;
     if (forceUpdated) {
       coapDeviceTypeConfigurationFormGroup.patchValue({
         transportPayloadTypeConfiguration: this.transportPayloadTypeConfiguration

ui-ngx/src/app/modules/home/components/profile/device/common/power-mode-setting.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { UntypedFormGroup } from '@angular/forms';
 import {
   DEFAULT_EDRX_CYCLE,
   DEFAULT_PAGING_TRANSMISSION_WINDOW, DEFAULT_PSM_ACTIVITY_TIMER,
@@ -38,7 +38,7 @@ export class PowerModeSettingComponent implements OnInit, OnDestroy {
   private destroy$ = new Subject();
 
   @Input()
-  parentForm: FormGroup;
+  parentForm: UntypedFormGroup;
 
   @Input()
   isDeviceSetting = false;

ui-ngx/src/app/modules/home/components/profile/device/common/time-unit-select.component.ts

@@ -17,8 +17,8 @@
 import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
-  FormBuilder,
-  FormGroup,
+  UntypedFormBuilder,
+  UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   ValidationErrors,
@@ -62,7 +62,7 @@ interface FormGroupModel {
 })
 export class TimeUnitSelectComponent implements OnInit, OnDestroy, ControlValueAccessor, Validator {
 
-  timeUnitSelectFormGroup: FormGroup;
+  timeUnitSelectFormGroup: UntypedFormGroup;
 
   timeUnits = Object.values({...TimeUnitMilli, ...TimeUnit}).filter(item => item !== TimeUnit.DAYS);
   timeUnitTranslations = timeUnitTranslationMap;
@@ -107,7 +107,7 @@ export class TimeUnitSelectComponent implements OnInit, OnDestroy, ControlValueA
   private propagateChange = (v: any) => {
   }
 
-  constructor(private fb: FormBuilder) {
+  constructor(private fb: UntypedFormBuilder) {
   }
 
   ngOnInit() {

ui-ngx/src/app/modules/home/components/profile/device/default-device-profile-configuration.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component, forwardRef, Input, OnInit } from '@angular/core';
-import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
+import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@app/core/core.state';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
@@ -37,7 +37,7 @@ import {
 })
 export class DefaultDeviceProfileConfigurationComponent implements ControlValueAccessor, OnInit {
 
-  defaultDeviceProfileConfigurationFormGroup: FormGroup;
+  defaultDeviceProfileConfigurationFormGroup: UntypedFormGroup;
 
   private requiredValue: boolean;
   get required(): boolean {
@@ -54,7 +54,7 @@ export class DefaultDeviceProfileConfigurationComponent implements ControlValueA
   private propagateChange = (v: any) => { };
 
   constructor(private store: Store<AppState>,
-              private fb: FormBuilder) {
+              private fb: UntypedFormBuilder) {
   }
 
   registerOnChange(fn: any): void {

ui-ngx/src/app/modules/home/components/profile/device/default-device-profile-transport-configuration.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component, forwardRef, Input, OnInit } from '@angular/core';
-import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
+import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@app/core/core.state';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
@@ -37,7 +37,7 @@ import {
 })
 export class DefaultDeviceProfileTransportConfigurationComponent implements ControlValueAccessor, OnInit {
 
-  defaultDeviceProfileTransportConfigurationFormGroup: FormGroup;
+  defaultDeviceProfileTransportConfigurationFormGroup: UntypedFormGroup;
 
   private requiredValue: boolean;
   get required(): boolean {
@@ -54,7 +54,7 @@ export class DefaultDeviceProfileTransportConfigurationComponent implements Cont
   private propagateChange = (v: any) => { };
 
   constructor(private store: Store<AppState>,
-              private fb: FormBuilder) {
+              private fb: UntypedFormBuilder) {
   }
 
   registerOnChange(fn: any): void {

ui-ngx/src/app/modules/home/components/profile/device/device-profile-configuration.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
-import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
+import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@app/core/core.state';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
@@ -38,7 +38,7 @@ export class DeviceProfileConfigurationComponent implements ControlValueAccessor
 
   deviceProfileType = DeviceProfileType;
 
-  deviceProfileConfigurationFormGroup: FormGroup;
+  deviceProfileConfigurationFormGroup: UntypedFormGroup;
 
   private destroy$ = new Subject();
 
@@ -59,7 +59,7 @@ export class DeviceProfileConfigurationComponent implements ControlValueAccessor
   private propagateChange = (v: any) => { };
 
   constructor(private store: Store<AppState>,
-              private fb: FormBuilder) {
+              private fb: UntypedFormBuilder) {
   }
 
   registerOnChange(fn: any): void {

ui-ngx/src/app/modules/home/components/profile/device/device-profile-transport-configuration.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component, forwardRef, Input, OnInit } from '@angular/core';
-import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
+import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@app/core/core.state';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
@@ -36,7 +36,7 @@ export class DeviceProfileTransportConfigurationComponent implements ControlValu
 
   deviceTransportType = DeviceTransportType;
 
-  deviceProfileTransportConfigurationFormGroup: FormGroup;
+  deviceProfileTransportConfigurationFormGroup: UntypedFormGroup;
 
   private requiredValue: boolean;
   get required(): boolean {
@@ -58,7 +58,7 @@ export class DeviceProfileTransportConfigurationComponent implements ControlValu
   private propagateChange = (v: any) => { };
 
   constructor(private store: Store<AppState>,
-              private fb: FormBuilder) {
+              private fb: UntypedFormBuilder) {
   }
 
   registerOnChange(fn: any): void {

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-dialog.component.ts

@@ -21,7 +21,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { Router } from '@angular/router';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, FormGroupDirective, NgForm } from '@angular/forms';
 import { AttributesNameValueMap } from '@home/components/profile/device/lwm2m/lwm2m-profile-config.models';
 
 export interface Lwm2mAttributesDialogData {
@@ -46,14 +46,14 @@ export class Lwm2mAttributesDialogComponent
 
   private submitted = false;
 
-  attributeFormGroup: FormGroup;
+  attributeFormGroup: UntypedFormGroup;
 
   constructor(protected store: Store<AppState>,
               protected router: Router,
               @Inject(MAT_DIALOG_DATA) private data: Lwm2mAttributesDialogData,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               public dialogRef: MatDialogRef<Lwm2mAttributesDialogComponent, AttributesNameValueMap>,
-              private fb: FormBuilder) {
+              private fb: UntypedFormBuilder) {
     super(store, router, dialogRef);
 
     this.readonly = data.readonly;
@@ -68,7 +68,7 @@ export class Lwm2mAttributesDialogComponent
     }
   }
 
-  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
     const customErrorState = !!(control && control.invalid && this.submitted);
     return originalErrorState || customErrorState;

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-key-list.component.ts

@@ -18,9 +18,9 @@ import { Component, forwardRef, Input, OnDestroy } from '@angular/core';
 import {
   AbstractControl,
   ControlValueAccessor,
-  FormArray,
-  FormBuilder,
-  FormGroup,
+  UntypedFormArray,
+  UntypedFormBuilder,
+  UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   Validator,
@@ -67,7 +67,7 @@ export class Lwm2mAttributesKeyListComponent extends PageComponent implements Co
   @Input()
   isResource = false;
 
-  attributesValueFormGroup: FormGroup;
+  attributesValueFormGroup: UntypedFormGroup;
 
   private propagateChange = null;
   private valueChange$: Subscription = null;
@@ -75,7 +75,7 @@ export class Lwm2mAttributesKeyListComponent extends PageComponent implements Co
   private usedAttributesName: AttributeName[] = [];
 
   constructor(protected store: Store<AppState>,
-              private fb: FormBuilder) {
+              private fb: UntypedFormBuilder) {
     super(store);
     this.attributesValueFormGroup = this.fb.group({
       attributesValue: this.fb.array([])
@@ -137,8 +137,8 @@ export class Lwm2mAttributesKeyListComponent extends PageComponent implements Co
     this.updateUsedAttributesName();
   }
 
-  attributesValueFormArray(): FormArray {
-    return this.attributesValueFormGroup.get('attributesValue') as FormArray;
+  attributesValueFormArray(): UntypedFormArray {
+    return this.attributesValueFormGroup.get('attributesValue') as UntypedFormArray;
   }
 
   public removeKeyVal(index: number) {
@@ -153,7 +153,7 @@ export class Lwm2mAttributesKeyListComponent extends PageComponent implements Co
     }
   }
 
-  private createdFormGroup(value?: AttributesNameValue): FormGroup {
+  private createdFormGroup(value?: AttributesNameValue): UntypedFormGroup {
     if (isUndefinedOrNull(value)) {
       value = {
         name: this.getFirstUnusedAttributesName(),

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component, forwardRef, Input, OnDestroy } from '@angular/core';
-import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { isEmpty, isUndefinedOrNull } from '@core/utils';
 import { Lwm2mAttributesDialogComponent, Lwm2mAttributesDialogData } from './lwm2m-attributes-dialog.component';
@@ -35,7 +35,7 @@ import { takeUntil } from 'rxjs/operators';
   }]
 })
 export class Lwm2mAttributesComponent implements ControlValueAccessor, OnDestroy {
-  attributesFormGroup: FormGroup;
+  attributesFormGroup: UntypedFormGroup;
 
   private requiredValue: boolean;
   private destroy$ = new Subject();
@@ -61,7 +61,7 @@ export class Lwm2mAttributesComponent implements ControlValueAccessor, OnDestroy
   }
 
   constructor(private dialog: MatDialog,
-              private fb: FormBuilder) {
+              private fb: UntypedFormBuilder) {
     this.attributesFormGroup = this.fb.group({
       attributes: [{}]
     });

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-add-config-server-dialog.component.ts

@@ -16,7 +16,7 @@
 
 import { Component } from '@angular/core';
 import { DialogComponent } from '@shared/components/dialog.component';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { Router } from '@angular/router';
@@ -32,14 +32,14 @@ import {
 })
 export class Lwm2mBootstrapAddConfigServerDialogComponent extends DialogComponent<Lwm2mBootstrapAddConfigServerDialogComponent> {
 
-  addConfigServerFormGroup: FormGroup;
+  addConfigServerFormGroup: UntypedFormGroup;
 
   serverTypes = Object.values(ServerConfigType);
   serverConfigTypeNamesMap = ServerConfigTypeTranslationMap;
 
   constructor(protected store: Store<AppState>,
               protected router: Router,
-              private fb: FormBuilder,
+              private fb: UntypedFormBuilder,
               public dialogRef: MatDialogRef<Lwm2mBootstrapAddConfigServerDialogComponent, boolean>,
   ) {
     super(store, router, dialogRef);

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-config-servers.component.ts

@@ -18,9 +18,9 @@ import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@ang
 import {
   AbstractControl,
   ControlValueAccessor,
-  FormArray,
-  FormBuilder, FormControl,
-  FormGroup,
+  UntypedFormArray,
+  UntypedFormBuilder, UntypedFormControl,
+  UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR
 } from '@angular/forms';
@@ -52,7 +52,7 @@ import { Lwm2mSecurityType } from '@shared/models/lwm2m-security-config.models';
 })
 export class Lwm2mBootstrapConfigServersComponent implements OnInit, ControlValueAccessor {
 
-  bootstrapConfigServersFormGroup: FormGroup;
+  bootstrapConfigServersFormGroup: UntypedFormGroup;
 
   @Input()
   disabled: boolean;
@@ -80,7 +80,7 @@ export class Lwm2mBootstrapConfigServersComponent implements OnInit, ControlValu
               public matDialog: MatDialog,
               private dialogService: DialogService,
               private deviceProfileService: DeviceProfileService,
-              private fb: FormBuilder) {
+              private fb: UntypedFormBuilder) {
   }
 
   registerOnChange(fn: any): void {
@@ -96,8 +96,8 @@ export class Lwm2mBootstrapConfigServersComponent implements OnInit, ControlValu
     });
   }
 
-  serverConfigsFromArray(): FormArray {
-    return this.bootstrapConfigServersFormGroup.get('serverConfigs') as FormArray;
+  serverConfigsFromArray(): UntypedFormArray {
+    return this.bootstrapConfigServersFormGroup.get('serverConfigs') as UntypedFormArray;
   }
 
   setDisabledState(isDisabled: boolean): void {
@@ -183,7 +183,7 @@ export class Lwm2mBootstrapConfigServersComponent implements OnInit, ControlValu
     this.isTransportWasRunWithBootstrapChange.emit(this.isTransportWasRunWithBootstrap);
   }
 
-  public validate(c: FormControl) {
+  public validate(c: UntypedFormControl) {
     return (this.bootstrapConfigServersFormGroup.valid) ? null : {
       serverConfigs: {
         valid: false,

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-config-server.component.ts

@@ -17,8 +17,8 @@
 import { Component, EventEmitter, forwardRef, Input, OnDestroy, OnInit, Output } from '@angular/core';
 import {
   ControlValueAccessor,
-  FormBuilder,
-  FormGroup,
+  UntypedFormBuilder,
+  UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   ValidationErrors,
@@ -63,7 +63,7 @@ export class Lwm2mDeviceConfigServerComponent implements OnInit, ControlValueAcc
 
   private isDataLoadedIntoCache = false;
 
-  serverFormGroup: FormGroup;
+  serverFormGroup: UntypedFormGroup;
   bindingModeTypes = Object.values(BingingMode);
   bindingModeTypeNamesMap = BingingModeTranslationsMap;
   securityConfigLwM2MType = Lwm2mSecurityType;
@@ -81,7 +81,7 @@ export class Lwm2mDeviceConfigServerComponent implements OnInit, ControlValueAcc
 
   private propagateChange = (v: any) => { };
 
-  constructor(public fb: FormBuilder,
+  constructor(public fb: UntypedFormBuilder,
               private deviceProfileService: DeviceProfileService) {
   }
 

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-profile-transport-configuration.component.ts

@@ -17,8 +17,8 @@
 import { ChangeDetectorRef, Component, forwardRef, Input, OnDestroy } from '@angular/core';
 import {
   ControlValueAccessor,
-  FormBuilder,
-  FormGroup,
+  UntypedFormBuilder,
+  UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   ValidationErrors,
@@ -79,7 +79,7 @@ export class Lwm2mDeviceProfileTransportConfigurationComponent implements Contro
   private requiredValue: boolean;
   private destroy$ = new Subject();
 
-  lwm2mDeviceProfileFormGroup: FormGroup;
+  lwm2mDeviceProfileFormGroup: UntypedFormGroup;
   configurationValue: Lwm2mProfileConfigModels;
   sortFunction: (key: string, value: object) => object;
 
@@ -99,7 +99,7 @@ export class Lwm2mDeviceProfileTransportConfigurationComponent implements Contro
   }
 
   constructor(public translate: TranslateService,
-              private fb: FormBuilder,
+              private fb: UntypedFormBuilder,
               private cd: ChangeDetectorRef,
               private dialogService: DialogService,
               private deviceProfileService: DeviceProfileService) {
@@ -570,8 +570,8 @@ export class Lwm2mDeviceProfileTransportConfigurationComponent implements Contro
     });
   }
 
-  get clientSettingsFormGroup(): FormGroup {
-    return this.lwm2mDeviceProfileFormGroup.get('clientLwM2mSettings') as FormGroup;
+  get clientSettingsFormGroup(): UntypedFormGroup {
+    return this.lwm2mDeviceProfileFormGroup.get('clientLwM2mSettings') as UntypedFormGroup;
   }
 
 }

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-dialog.component.ts

@@ -16,7 +16,7 @@
 
 import { Component, Inject, OnInit } from '@angular/core';
 import { DialogComponent } from '@shared/components/dialog.component';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { Router } from '@angular/router';
@@ -35,14 +35,14 @@ export interface Lwm2mObjectAddInstancesData {
 export class Lwm2mObjectAddInstancesDialogComponent extends DialogComponent<Lwm2mObjectAddInstancesDialogComponent, object>
   implements OnInit {
 
-  instancesFormGroup: FormGroup;
+  instancesFormGroup: UntypedFormGroup;
   submitted = false;
 
   constructor(protected store: Store<AppState>,
               protected router: Router,
               @Inject(MAT_DIALOG_DATA) public data: Lwm2mObjectAddInstancesData,
               public dialogRef: MatDialogRef<Lwm2mObjectAddInstancesDialogComponent, object>,
-              public fb: FormBuilder) {
+              public fb: UntypedFormBuilder) {
     super(store, router, dialogRef);
   }
 

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-list.component.ts

@@ -17,8 +17,8 @@
 import { Component, ElementRef, forwardRef, Input, ViewChild } from '@angular/core';
 import {
   ControlValueAccessor,
-  FormBuilder,
-  FormGroup,
+  UntypedFormBuilder,
+  UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR, ValidationErrors, Validator,
   Validators
@@ -62,14 +62,14 @@ export class Lwm2mObjectAddInstancesListComponent implements ControlValueAccesso
 
   @ViewChild('instanceId') instanceId: ElementRef<HTMLInputElement>;
 
-  instancesListFormGroup: FormGroup;
+  instancesListFormGroup: UntypedFormGroup;
   instancesId = new Set<number>();
   separatorKeysCodes = [ENTER, COMMA, SEMICOLON];
   instanceIdValueMax = INSTANCES_ID_VALUE_MAX;
 
   private propagateChange = (v: any) => { };
 
-  constructor(private fb: FormBuilder) {
+  constructor(private fb: UntypedFormBuilder) {
     this.instancesListFormGroup = this.fb.group({
       instanceList: [null],
       instanceId: [null, [

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-list.component.ts

@@ -17,8 +17,8 @@
 import { Component, ElementRef, EventEmitter, forwardRef, Input, OnInit, Output, ViewChild } from '@angular/core';
 import {
   ControlValueAccessor,
-  FormBuilder,
-  FormGroup,
+  UntypedFormBuilder,
+  UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   ValidationErrors,
@@ -56,7 +56,7 @@ export class Lwm2mObjectListComponent implements ControlValueAccessor, OnInit, V
   private requiredValue: boolean;
   private dirty = false;
 
-  lwm2mListFormGroup: FormGroup;
+  lwm2mListFormGroup: UntypedFormGroup;
   objectsList: Array<ObjectLwM2M> = [];
   filteredObjectsList: Observable<Array<ObjectLwM2M>>;
   disabled = false;
@@ -85,7 +85,7 @@ export class Lwm2mObjectListComponent implements ControlValueAccessor, OnInit, V
 
   constructor(public truncate: TruncatePipe,
               private deviceProfileService: DeviceProfileService,
-              private fb: FormBuilder) {
+              private fb: UntypedFormBuilder) {
     this.lwm2mListFormGroup = this.fb.group({
       objectsList: [this.objectsList],
       objectLwm2m: ['']

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-instances.component.ts

@@ -18,9 +18,9 @@ import { Component, forwardRef, Input, OnDestroy } from '@angular/core';
 import {
   AbstractControl,
   ControlValueAccessor,
-  FormArray,
-  FormBuilder,
-  FormGroup,
+  UntypedFormArray,
+  UntypedFormBuilder,
+  UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   ValidationErrors,
@@ -53,7 +53,7 @@ import { Subscription } from 'rxjs';
 
 export class Lwm2mObserveAttrTelemetryInstancesComponent implements ControlValueAccessor, Validator, OnDestroy {
 
-  instancesFormGroup: FormGroup;
+  instancesFormGroup: UntypedFormGroup;
 
   private requiredValue: boolean;
   get required(): boolean {
@@ -75,7 +75,7 @@ export class Lwm2mObserveAttrTelemetryInstancesComponent implements ControlValue
   private valueChange$: Subscription = null;
   private propagateChange = (v: any) => { };
 
-  constructor(private fb: FormBuilder,
+  constructor(private fb: UntypedFormBuilder,
               public translate: TranslateService) {
     this.instancesFormGroup = this.fb.group({
       instances: this.fb.array([])
@@ -114,8 +114,8 @@ export class Lwm2mObserveAttrTelemetryInstancesComponent implements ControlValue
     };
   }
 
-  get instancesFormArray(): FormArray {
-    return this.instancesFormGroup.get('instances') as FormArray;
+  get instancesFormArray(): UntypedFormArray {
+    return this.instancesFormGroup.get('instances') as UntypedFormArray;
   }
 
   private updateInstances(instances: Instance[]): void {
@@ -141,7 +141,7 @@ export class Lwm2mObserveAttrTelemetryInstancesComponent implements ControlValue
     }
   }
 
-  private createInstanceFormGroup(instance: Instance): FormGroup {
+  private createInstanceFormGroup(instance: Instance): UntypedFormGroup {
     return this.fb.group({
       id: [instance.id],
       attributes: [instance.attributes],

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-resources.component.ts

@@ -18,9 +18,9 @@ import { Component, forwardRef, Input, OnDestroy } from '@angular/core';
 import {
   AbstractControl,
   ControlValueAccessor,
-  FormArray,
-  FormBuilder,
-  FormGroup,
+  UntypedFormArray,
+  UntypedFormBuilder,
+  UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   ValidationErrors,
@@ -52,7 +52,7 @@ import { startWith, takeUntil } from 'rxjs/operators';
 
 export class Lwm2mObserveAttrTelemetryResourcesComponent implements ControlValueAccessor, OnDestroy, Validator {
 
-  resourcesFormGroup: FormGroup;
+  resourcesFormGroup: UntypedFormGroup;
 
   @Input()
   disabled = false;
@@ -74,7 +74,7 @@ export class Lwm2mObserveAttrTelemetryResourcesComponent implements ControlValue
   private valueChange$: Subscription = null;
   private propagateChange = (v: any) => { };
 
-  constructor(private fb: FormBuilder) {
+  constructor(private fb: UntypedFormBuilder) {
     this.resourcesFormGroup = this.fb.group({
       resources: this.fb.array([])
     });
@@ -121,8 +121,8 @@ export class Lwm2mObserveAttrTelemetryResourcesComponent implements ControlValue
     };
   }
 
-  get resourcesFormArray(): FormArray {
-    return this.resourcesFormGroup.get('resources') as FormArray;
+  get resourcesFormArray(): UntypedFormArray {
+    return this.resourcesFormGroup.get('resources') as UntypedFormArray;
   }
 
   getNameResourceLwm2m(resourceLwM2M: ResourceLwM2M): string {
@@ -152,7 +152,7 @@ export class Lwm2mObserveAttrTelemetryResourcesComponent implements ControlValue
     }
   }
 
-  private createdResourceFormGroup(resource: ResourceLwM2M): FormGroup {
+  private createdResourceFormGroup(resource: ResourceLwM2M): UntypedFormGroup {
     const form = this.fb.group( {
       id: [resource.id],
       name: [resource.name],

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry.component.ts

@@ -18,9 +18,9 @@ import { ChangeDetectorRef, Component, forwardRef, Input, OnDestroy } from '@ang
 import {
   AbstractControl,
   ControlValueAccessor,
-  FormArray,
-  FormBuilder,
-  FormGroup,
+  UntypedFormArray,
+  UntypedFormBuilder,
+  UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   ValidationErrors,
@@ -58,7 +58,7 @@ import { Subscription } from 'rxjs';
 
 export class Lwm2mObserveAttrTelemetryComponent implements ControlValueAccessor, OnDestroy, Validator {
 
-  modelsFormGroup: FormGroup;
+  modelsFormGroup: UntypedFormGroup;
 
   private requiredValue: boolean;
   get required(): boolean {
@@ -80,7 +80,7 @@ export class Lwm2mObserveAttrTelemetryComponent implements ControlValueAccessor,
   private valueChange$: Subscription = null;
   private propagateChange = (v: any) => { };
 
-  constructor(private fb: FormBuilder,
+  constructor(private fb: UntypedFormBuilder,
               private dialog: MatDialog,
               private cd: ChangeDetectorRef) {
     this.modelsFormGroup = this.fb.group({
@@ -122,8 +122,8 @@ export class Lwm2mObserveAttrTelemetryComponent implements ControlValueAccessor,
     };
   }
 
-  get modelsFormArray(): FormArray {
-    return this.modelsFormGroup.get('models') as FormArray;
+  get modelsFormArray(): UntypedFormArray {
+    return this.modelsFormGroup.get('models') as UntypedFormArray;
   }
 
   private updateModels(models: ObjectLwM2M[]) {
@@ -147,7 +147,7 @@ export class Lwm2mObserveAttrTelemetryComponent implements ControlValueAccessor,
     }
   }
 
-  private createModelFormGroup(objectLwM2M: ObjectLwM2M): FormGroup {
+  private createModelFormGroup(objectLwM2M: ObjectLwM2M): UntypedFormGroup {
     return this.fb.group({
       id: [objectLwM2M.id],
       keyId: [objectLwM2M.keyId],

ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.ts

@@ -17,9 +17,9 @@
 import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
-  FormBuilder,
-  FormControl,
-  FormGroup,
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup,
   NG_VALUE_ACCESSOR,
   ValidatorFn,
   Validators
@@ -58,7 +58,7 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
 
   transportPayloadTypeTranslations = transportPayloadTypeTranslationMap;
 
-  mqttDeviceProfileTransportConfigurationFormGroup: FormGroup;
+  mqttDeviceProfileTransportConfigurationFormGroup: UntypedFormGroup;
 
   private destroy$ = new Subject();
   private requiredValue: boolean;
@@ -78,7 +78,7 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
   private propagateChange = (v: any) => { };
 
   constructor(private store: Store<AppState>,
-              private fb: FormBuilder) {
+              private fb: UntypedFormBuilder) {
   }
 
   registerOnChange(fn: any): void {
@@ -165,7 +165,7 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
 
   private updateTransportPayloadBasedControls(type: TransportPayloadType, forceUpdated = false) {
     const transportPayloadTypeForm = this.mqttDeviceProfileTransportConfigurationFormGroup
-      .get('transportPayloadTypeConfiguration') as FormGroup;
+      .get('transportPayloadTypeConfiguration') as UntypedFormGroup;
     if (forceUpdated) {
       transportPayloadTypeForm.patchValue({
         deviceTelemetryProtoSchema: defaultTelemetrySchema,
@@ -194,7 +194,7 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
   }
 
   private validationMQTTTopic(): ValidatorFn {
-    return (c: FormControl) => {
+    return (c: UntypedFormControl) => {
       const newTopic = c.value;
       const wildcardSymbols = /[#+]/g;
       let findSymbol = wildcardSymbols.exec(newTopic);
@@ -223,7 +223,7 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
     };
   }
 
-  private uniqueDeviceTopicValidator(control: FormGroup): { [key: string]: boolean } | null {
+  private uniqueDeviceTopicValidator(control: UntypedFormGroup): { [key: string]: boolean } | null {
     if (control.getRawValue()) {
       const formValue = control.getRawValue() as MqttDeviceProfileTransportConfiguration;
       if (formValue.deviceAttributesTopic === formValue.deviceTelemetryTopic) {

ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-communication-config.component.ts

@@ -18,9 +18,9 @@ import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
 import {
   AbstractControl,
   ControlValueAccessor,
-  FormArray,
-  FormBuilder,
-  FormGroup,
+  UntypedFormArray,
+  UntypedFormBuilder,
+  UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   Validator,
@@ -52,7 +52,7 @@ export class SnmpDeviceProfileCommunicationConfigComponent implements OnInit, On
   snmpSpecTypes = Object.values(SnmpSpecType);
   snmpSpecTypeTranslationMap = SnmpSpecTypeTranslationMap;
 
-  deviceProfileCommunicationConfig: FormGroup;
+  deviceProfileCommunicationConfig: UntypedFormGroup;
 
   @Input()
   disabled: boolean;
@@ -62,7 +62,7 @@ export class SnmpDeviceProfileCommunicationConfigComponent implements OnInit, On
   private destroy$ = new Subject();
   private propagateChange = (v: any) => { };
 
-  constructor(private fb: FormBuilder) { }
+  constructor(private fb: UntypedFormBuilder) { }
 
   ngOnInit(): void {
     this.deviceProfileCommunicationConfig = this.fb.group({
@@ -78,8 +78,8 @@ export class SnmpDeviceProfileCommunicationConfigComponent implements OnInit, On
     this.destroy$.complete();
   }
 
-  communicationConfigFormArray(): FormArray {
-    return this.deviceProfileCommunicationConfig.get('communicationConfig') as FormArray;
+  communicationConfigFormArray(): UntypedFormArray {
+    return this.deviceProfileCommunicationConfig.get('communicationConfig') as UntypedFormArray;
   }
 
   registerOnChange(fn: any): void {
@@ -175,7 +175,7 @@ export class SnmpDeviceProfileCommunicationConfigComponent implements OnInit, On
     });
   }
 
-  private createdFormGroup(value?: SnmpCommunicationConfig): FormGroup {
+  private createdFormGroup(value?: SnmpCommunicationConfig): UntypedFormGroup {
     if (isUndefinedOrNull(value)) {
       value = {
         spec: this.getFirstUnusedSeverity(),

ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-mapping.component.ts

@@ -18,9 +18,9 @@ import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
 import {
   AbstractControl,
   ControlValueAccessor,
-  FormArray,
-  FormBuilder,
-  FormGroup,
+  UntypedFormArray,
+  UntypedFormBuilder,
+  UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   ValidationErrors,
@@ -50,7 +50,7 @@ import { isUndefinedOrNull } from '@core/utils';
 })
 export class SnmpDeviceProfileMappingComponent implements OnInit, OnDestroy, ControlValueAccessor, Validator {
 
-  mappingsConfigForm: FormGroup;
+  mappingsConfigForm: UntypedFormGroup;
 
   dataTypes = Object.values(DataType);
   dataTypesTranslationMap = DataTypeTranslationMap;
@@ -63,7 +63,7 @@ export class SnmpDeviceProfileMappingComponent implements OnInit, OnDestroy, Con
   private valueChange$: Subscription = null;
   private propagateChange = (v: any) => { };
 
-  constructor(private fb: FormBuilder) { }
+  constructor(private fb: UntypedFormBuilder) { }
 
   ngOnInit() {
     this.mappingsConfigForm = this.fb.group({
@@ -126,8 +126,8 @@ export class SnmpDeviceProfileMappingComponent implements OnInit, OnDestroy, Con
     }
   }
 
-  mappingsConfigFormArray(): FormArray {
-    return this.mappingsConfigForm.get('mappings') as FormArray;
+  mappingsConfigFormArray(): UntypedFormArray {
+    return this.mappingsConfigForm.get('mappings') as UntypedFormArray;
   }
 
   public addMappingConfig() {
@@ -142,7 +142,7 @@ export class SnmpDeviceProfileMappingComponent implements OnInit, OnDestroy, Con
     this.mappingsConfigFormArray().removeAt(index);
   }
 
-  private createdFormGroup(value?: SnmpMapping): FormGroup {
+  private createdFormGroup(value?: SnmpMapping): UntypedFormGroup {
     if (isUndefinedOrNull(value)) {
       value = {
         dataType: DataType.STRING,

ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-transport-configuration.component.ts

@@ -17,8 +17,8 @@
 import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
-  FormBuilder,
-  FormGroup,
+  UntypedFormBuilder,
+  UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   ValidationErrors,
@@ -61,7 +61,7 @@ export interface OidMappingConfiguration {
 })
 export class SnmpDeviceProfileTransportConfigurationComponent implements OnInit, OnDestroy, ControlValueAccessor, Validator {
 
-  snmpDeviceProfileTransportConfigurationFormGroup: FormGroup;
+  snmpDeviceProfileTransportConfigurationFormGroup: UntypedFormGroup;
 
   private destroy$ = new Subject();
   private requiredValue: boolean;
@@ -81,7 +81,7 @@ export class SnmpDeviceProfileTransportConfigurationComponent implements OnInit,
   private propagateChange = (v: any) => {
   }
 
-  constructor(private fb: FormBuilder) {
+  constructor(private fb: UntypedFormBuilder) {
   }
 
   ngOnInit(): void {

ui-ngx/src/app/modules/home/components/profile/queue/tenant-profile-queues.component.ts

@@ -18,9 +18,9 @@ import { Component, forwardRef, Input, OnDestroy } from '@angular/core';
 import {
   AbstractControl,
   ControlValueAccessor,
-  FormArray,
-  FormBuilder,
-  FormGroup,
+  UntypedFormArray,
+  UntypedFormBuilder,
+  UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   ValidationErrors,
@@ -54,7 +54,7 @@ import { guid } from '@core/utils';
 })
 export class TenantProfileQueuesComponent implements ControlValueAccessor, Validator, OnDestroy {
 
-  tenantProfileQueuesFormGroup: FormGroup;
+  tenantProfileQueuesFormGroup: UntypedFormGroup;
   newQueue = false;
   idMap = [];
 
@@ -76,7 +76,7 @@ export class TenantProfileQueuesComponent implements ControlValueAccessor, Valid
 
   constructor(private store: Store<AppState>,
               private utils: UtilsService,
-              private fb: FormBuilder) {
+              private fb: UntypedFormBuilder) {
   }
 
   registerOnChange(fn: any): void {
@@ -98,8 +98,8 @@ export class TenantProfileQueuesComponent implements ControlValueAccessor, Valid
     });
   }
 
-  get queuesFormArray(): FormArray {
-    return this.tenantProfileQueuesFormGroup.get('queues') as FormArray;
+  get queuesFormArray(): UntypedFormArray {
+    return this.tenantProfileQueuesFormGroup.get('queues') as UntypedFormArray;
   }
 
   setDisabledState(isDisabled: boolean): void {
@@ -146,7 +146,7 @@ export class TenantProfileQueuesComponent implements ControlValueAccessor, Valid
   }
 
   public removeQueue(index: number) {
-    (this.tenantProfileQueuesFormGroup.get('queues') as FormArray).removeAt(index);
+    (this.tenantProfileQueuesFormGroup.get('queues') as UntypedFormArray).removeAt(index);
     this.idMap.splice(index, 1);
   }
 
@@ -176,7 +176,7 @@ export class TenantProfileQueuesComponent implements ControlValueAccessor, Valid
     };
     this.idMap.push(queue.id);
     this.newQueue = true;
-    const queuesArray = this.tenantProfileQueuesFormGroup.get('queues') as FormArray;
+    const queuesArray = this.tenantProfileQueuesFormGroup.get('queues') as UntypedFormArray;
     queuesArray.push(this.fb.control(queue, []));
     this.tenantProfileQueuesFormGroup.updateValueAndValidity();
     if (!this.tenantProfileQueuesFormGroup.valid) {

ui-ngx/src/app/modules/home/components/profile/tenant-profile-autocomplete.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component, ElementRef, EventEmitter, forwardRef, Input, OnInit, Output, ViewChild } from '@angular/core';
-import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Observable, of } from 'rxjs';
 import { PageLink } from '@shared/models/page/page-link';
 import { Direction } from '@shared/models/page/sort-order';
@@ -48,7 +48,7 @@ import { getEntityDetailsPageURL } from '@core/utils';
 })
 export class TenantProfileAutocompleteComponent implements ControlValueAccessor, OnInit {
 
-  selectTenantProfileFormGroup: FormGroup;
+  selectTenantProfileFormGroup: UntypedFormGroup;
 
   modelValue: TenantProfileId | null;
 
@@ -88,7 +88,7 @@ export class TenantProfileAutocompleteComponent implements ControlValueAccessor,
               public translate: TranslateService,
               public truncate: TruncatePipe,
               private tenantProfileService: TenantProfileService,
-              private fb: FormBuilder,
+              private fb: UntypedFormBuilder,
               private dialog: MatDialog) {
     this.selectTenantProfileFormGroup = this.fb.group({
       tenantProfile: [null]

ui-ngx/src/app/modules/home/components/profile/tenant-profile-data.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
-import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
+import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@app/core/core.state';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
@@ -34,7 +34,7 @@ import { Subscription } from 'rxjs';
 })
 export class TenantProfileDataComponent implements ControlValueAccessor, OnInit, OnDestroy {
 
-  tenantProfileDataFormGroup: FormGroup;
+  tenantProfileDataFormGroup: UntypedFormGroup;
 
   private requiredValue: boolean;
   get required(): boolean {
@@ -52,7 +52,7 @@ export class TenantProfileDataComponent implements ControlValueAccessor, OnInit,
   private propagateChange = (v: any) => { };
 
   constructor(private store: Store<AppState>,
-              private fb: FormBuilder) {
+              private fb: UntypedFormBuilder) {
   }
 
   registerOnChange(fn: any): void {

ui-ngx/src/app/modules/home/components/profile/tenant-profile-dialog.component.ts

@@ -27,7 +27,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 { UntypedFormControl, FormGroupDirective, NgForm } from '@angular/forms';
 import { DialogComponent } from '@shared/components/dialog.component';
 import { Router } from '@angular/router';
 import { TenantProfile } from '@shared/models/tenant.model';
@@ -76,7 +76,7 @@ export class TenantProfileDialogComponent extends
     }
   }
 
-  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
     const customErrorState = !!(control && control.invalid && this.submitted);
     return originalErrorState || customErrorState;

ui-ngx/src/app/modules/home/components/profile/tenant-profile.component.ts

@@ -17,7 +17,7 @@
 import { ChangeDetectorRef, Component, Inject, Input, Optional } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { createTenantProfileConfiguration, TenantProfile, TenantProfileType } from '@shared/models/tenant.model';
 import { ActionNotificationShow } from '@app/core/notification/notification.actions';
 import { TranslateService } from '@ngx-translate/core';
@@ -39,7 +39,7 @@ export class TenantProfileComponent extends EntityComponent<TenantProfile> {
               protected translate: TranslateService,
               @Optional() @Inject('entity') protected entityValue: TenantProfile,
               @Optional() @Inject('entitiesTableConfig') protected entitiesTableConfigValue: EntityTableConfig<TenantProfile>,
-              protected fb: FormBuilder,
+              protected fb: UntypedFormBuilder,
               protected cd: ChangeDetectorRef) {
     super(store, fb, entityValue, entitiesTableConfigValue, cd);
   }
@@ -52,7 +52,7 @@ export class TenantProfileComponent extends EntityComponent<TenantProfile> {
     }
   }
 
-  buildForm(entity: TenantProfile): FormGroup {
+  buildForm(entity: TenantProfile): UntypedFormGroup {
     const mainQueue = [
       {
         id: guid(),

ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component, forwardRef, Input, OnInit } from '@angular/core';
-import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
+import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@app/core/core.state';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
@@ -35,7 +35,7 @@ import { RateLimitsType } from './rate-limits/rate-limits.models';
 })
 export class DefaultTenantProfileConfigurationComponent implements ControlValueAccessor, OnInit {
 
-  defaultTenantProfileConfigurationFormGroup: FormGroup;
+  defaultTenantProfileConfigurationFormGroup: UntypedFormGroup;
 
   private requiredValue: boolean;
   get required(): boolean {
@@ -54,7 +54,7 @@ export class DefaultTenantProfileConfigurationComponent implements ControlValueA
   private propagateChange = (v: any) => { };
 
   constructor(private store: Store<AppState>,
-              private fb: FormBuilder) {
+              private fb: UntypedFormBuilder) {
     this.defaultTenantProfileConfigurationFormGroup = this.fb.group({
       maxDevices: [null, [Validators.required, Validators.min(0)]],
       maxAssets: [null, [Validators.required, Validators.min(0)]],