chore(demo): use typed form control (#6333)

taiga-family · Dec 26, 2023 · 280e1cc · 280e1cc
1 parent 39392a0
commit 280e1cc
Show file tree

Hide file tree

Showing 242 changed files with 778 additions and 780 deletions.
diff --git a/projects/addon-doc/components/demo/demo.component.ts b/projects/addon-doc/components/demo/demo.component.ts
@@ -13,7 +13,7 @@ import {
     TemplateRef,
     ViewChild,
 } from '@angular/core';
-import {AbstractControl, UntypedFormGroup} from '@angular/forms';
+import {AbstractControl, FormGroup} from '@angular/forms';
 import {Params, UrlSerializer, UrlTree} from '@angular/router';
 import {TuiDemoParams} from '@taiga-ui/addon-doc/interfaces';
 import {TUI_DOC_DEMO_TEXTS, TUI_DOC_URL_STATE_HANDLER} from '@taiga-ui/addon-doc/tokens';
@@ -68,7 +68,7 @@ export class TuiDocDemoComponent implements OnInit {
     @ContentChild(TemplateRef)
     readonly template: TemplateRef<Record<string, unknown>> | null = null;
 
-    testForm?: UntypedFormGroup;
+    testForm?: FormGroup;
 
     readonly updateOnVariants = ['change', 'blur', 'submit'] as const;
 
@@ -174,7 +174,7 @@ export class TuiDocDemoComponent implements OnInit {
         const {control, updateOn} = this;
 
         if (control) {
-            this.testForm = new UntypedFormGroup({testValue: control}, {updateOn});
+            this.testForm = new FormGroup({testValue: control}, {updateOn});
         }
     }
 

diff --git a/projects/addon-doc/components/language-switcher/language-switcher.component.ts b/projects/addon-doc/components/language-switcher/language-switcher.component.ts
@@ -1,5 +1,5 @@
 import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
-import {UntypedFormControl} from '@angular/forms';
+import {FormControl} from '@angular/forms';
 import {tuiCapitalizeFirstLetter, TuiFlagPipe} from '@taiga-ui/core';
 import {TuiCountryIsoCode, TuiLanguageName, TuiLanguageSwitcher} from '@taiga-ui/i18n';
 
@@ -14,9 +14,7 @@ import {TuiCountryIsoCode, TuiLanguageName, TuiLanguageSwitcher} from '@taiga-ui
     ],
 })
 export class TuiLanguageSwitcherComponent {
-    readonly language = new UntypedFormControl(
-        tuiCapitalizeFirstLetter(this.switcher.language),
-    );
+    readonly language = new FormControl(tuiCapitalizeFirstLetter(this.switcher.language));
 
     readonly flags = new Map<TuiLanguageName, TuiCountryIsoCode>([
         ['chinese', TuiCountryIsoCode.CN],

diff --git a/projects/addon-doc/components/navigation/navigation.component.ts b/projects/addon-doc/components/navigation/navigation.component.ts
@@ -8,7 +8,7 @@ import {
     Optional,
     Self,
 } from '@angular/core';
-import {UntypedFormControl} from '@angular/forms';
+import {FormControl} from '@angular/forms';
 import {Title} from '@angular/platform-browser';
 import {ActivatedRoute, Router, Scroll} from '@angular/router';
 import {TuiDocPage} from '@taiga-ui/addon-doc/interfaces';
@@ -62,7 +62,7 @@ export class TuiDocNavigationComponent {
     openPagesGroupsArr: boolean[] = [];
     active = '';
 
-    readonly search = new UntypedFormControl('');
+    readonly search = new FormControl('');
 
     readonly filtered$ = tuiControlValue<string>(this.search).pipe(
         filter(search => search.trim().length > 2),

diff --git a/projects/demo/src/modules/components/accordion/examples/2/index.ts b/projects/demo/src/modules/components/accordion/examples/2/index.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {UntypedFormControl, UntypedFormGroup} from '@angular/forms';
+import {FormControl, FormGroup} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 
@@ -32,8 +32,8 @@ export class TuiAccordionExample2 {
         rubles: import('./rubles.svg?raw'),
     };
 
-    testForm = new UntypedFormGroup({
-        name: new UntypedFormControl(''),
-        accounts: new UntypedFormControl(this.accounts[0]),
+    testForm = new FormGroup({
+        name: new FormControl(''),
+        accounts: new FormControl(this.accounts[0]),
     });
 }
diff --git a/projects/demo/src/modules/components/checkbox-block/checkbox-block.component.ts b/projects/demo/src/modules/components/checkbox-block/checkbox-block.component.ts
@@ -1,5 +1,5 @@
 import {Component, forwardRef} from '@angular/core';
-import {UntypedFormControl, UntypedFormGroup} from '@angular/forms';
+import {FormControl, FormGroup} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiHorizontalDirection, TuiSizeL, TuiSizeXS} from '@taiga-ui/core';
@@ -50,10 +50,10 @@ export class ExampleTuiCheckboxBlockComponent extends AbstractExampleTuiControl
 
     currentSize = this.sizes[3];
 
-    readonly control = new UntypedFormGroup({
-        testValue1: new UntypedFormControl(false),
-        testValue2: new UntypedFormControl(),
-        testValue3: new UntypedFormControl(true),
+    readonly control = new FormGroup({
+        testValue1: new FormControl(false),
+        testValue2: new FormControl<boolean | null>(null),
+        testValue3: new FormControl(true),
     });
 
     override get disabled(): boolean {

diff --git a/projects/demo/src/modules/components/checkbox-block/examples/1/index.ts b/projects/demo/src/modules/components/checkbox-block/examples/1/index.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {UntypedFormControl, UntypedFormGroup} from '@angular/forms';
+import {FormControl, FormGroup} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 
@@ -10,10 +10,10 @@ import {encapsulation} from '@demo/emulate/encapsulation';
     changeDetection,
 })
 export class TuiCheckboxBlockExample1 {
-    testForm = new UntypedFormGroup({
-        testValue1: new UntypedFormControl(false),
-        testValue2: new UntypedFormControl(false),
-        testValue3: new UntypedFormControl(false),
-        testValue4: new UntypedFormControl(false),
+    testForm = new FormGroup({
+        testValue1: new FormControl(false),
+        testValue2: new FormControl(false),
+        testValue3: new FormControl(false),
+        testValue4: new FormControl(false),
     });
 }
diff --git a/projects/demo/src/modules/components/checkbox-block/examples/2/index.ts b/projects/demo/src/modules/components/checkbox-block/examples/2/index.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {UntypedFormControl, UntypedFormGroup} from '@angular/forms';
+import {FormControl, FormGroup} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 
@@ -11,9 +11,9 @@ import {encapsulation} from '@demo/emulate/encapsulation';
     changeDetection,
 })
 export class TuiCheckboxBlockExample2 {
-    testForm = new UntypedFormGroup({
-        testValue1: new UntypedFormControl(false),
-        testValue2: new UntypedFormControl(false),
-        testValue3: new UntypedFormControl(false),
+    testForm = new FormGroup({
+        testValue1: new FormControl(false),
+        testValue2: new FormControl(false),
+        testValue3: new FormControl(false),
     });
 }
diff --git a/projects/demo/src/modules/components/checkbox-block/examples/3/index.ts b/projects/demo/src/modules/components/checkbox-block/examples/3/index.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {UntypedFormControl, UntypedFormGroup} from '@angular/forms';
+import {FormControl, FormGroup} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 
@@ -11,10 +11,10 @@ import {encapsulation} from '@demo/emulate/encapsulation';
     changeDetection,
 })
 export class TuiCheckboxBlockExample3 {
-    testForm = new UntypedFormGroup({
-        testValue1: new UntypedFormControl(false),
-        testValue2: new UntypedFormControl(false),
-        testValue3: new UntypedFormControl(false),
-        testValue4: new UntypedFormControl(false),
+    testForm = new FormGroup({
+        testValue1: new FormControl(false),
+        testValue2: new FormControl(false),
+        testValue3: new FormControl(false),
+        testValue4: new FormControl(false),
     });
 }
diff --git a/projects/demo/src/modules/components/checkbox-labeled/checkbox-labeled.component.ts b/projects/demo/src/modules/components/checkbox-labeled/checkbox-labeled.component.ts
@@ -1,5 +1,5 @@
 import {Component, forwardRef} from '@angular/core';
-import {UntypedFormControl, UntypedFormGroup} from '@angular/forms';
+import {FormControl, FormGroup} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiSizeL} from '@taiga-ui/core';
@@ -38,10 +38,10 @@ export class ExampleTuiCheckboxLabeledComponent extends AbstractExampleTuiContro
 
     override size: TuiSizeL = this.sizeVariants[0];
 
-    control = new UntypedFormGroup({
-        testValue1: new UntypedFormControl(false),
-        testValue2: new UntypedFormControl(),
-        testValue3: new UntypedFormControl(true),
+    control = new FormGroup({
+        testValue1: new FormControl(false),
+        testValue2: new FormControl<boolean | null>(null),
+        testValue3: new FormControl(true),
     });
 
     constructor() {

diff --git a/projects/demo/src/modules/components/checkbox-labeled/examples/1/index.ts b/projects/demo/src/modules/components/checkbox-labeled/examples/1/index.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {UntypedFormControl, UntypedFormGroup} from '@angular/forms';
+import {FormControl, FormGroup} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 
@@ -11,9 +11,9 @@ import {encapsulation} from '@demo/emulate/encapsulation';
     changeDetection,
 })
 export class TuiCheckboxLabeledExample1 {
-    testForm = new UntypedFormGroup({
-        testValue1: new UntypedFormControl(true),
-        testValue2: new UntypedFormControl(false),
-        testValue3: new UntypedFormControl(false),
+    testForm = new FormGroup({
+        testValue1: new FormControl(true),
+        testValue2: new FormControl(false),
+        testValue3: new FormControl(false),
     });
 }
diff --git a/projects/demo/src/modules/components/checkbox-labeled/examples/2/index.ts b/projects/demo/src/modules/components/checkbox-labeled/examples/2/index.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {UntypedFormControl, UntypedFormGroup} from '@angular/forms';
+import {FormControl, FormGroup} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 
@@ -10,9 +10,9 @@ import {encapsulation} from '@demo/emulate/encapsulation';
     changeDetection,
 })
 export class TuiCheckboxLabeledExample2 {
-    testForm = new UntypedFormGroup({
-        testValue1: new UntypedFormControl(true),
-        testValue2: new UntypedFormControl(false),
-        testValue3: new UntypedFormControl(false),
+    testForm = new FormGroup({
+        testValue1: new FormControl(true),
+        testValue2: new FormControl(false),
+        testValue3: new FormControl(false),
     });
 }
diff --git a/projects/demo/src/modules/components/checkbox/checkbox.component.ts b/projects/demo/src/modules/components/checkbox/checkbox.component.ts
@@ -1,5 +1,5 @@
 import {Component, forwardRef} from '@angular/core';
-import {UntypedFormControl, UntypedFormGroup} from '@angular/forms';
+import {FormControl, FormGroup} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiSizeL} from '@taiga-ui/core';
@@ -38,9 +38,9 @@ export class ExampleTuiCheckboxComponent extends AbstractExampleTuiControl {
 
     override size: TuiSizeL = this.sizeVariants[0];
 
-    readonly control = new UntypedFormGroup({
-        testValue1: new UntypedFormControl(false),
-        testValue2: new UntypedFormControl(),
-        testValue3: new UntypedFormControl(true),
+    readonly control = new FormGroup({
+        testValue1: new FormControl(false),
+        testValue2: new FormControl<boolean | null>(null),
+        testValue3: new FormControl(true),
     });
 }
diff --git a/projects/demo/src/modules/components/checkbox/examples/1/index.ts b/projects/demo/src/modules/components/checkbox/examples/1/index.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {UntypedFormControl, UntypedFormGroup} from '@angular/forms';
+import {FormControl, FormGroup} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 
@@ -10,10 +10,10 @@ import {encapsulation} from '@demo/emulate/encapsulation';
     changeDetection,
 })
 export class TuiCheckboxExample1 {
-    testForm = new UntypedFormGroup({
-        testValue1: new UntypedFormControl(true),
-        testValue2: new UntypedFormControl(false),
-        testValue3: new UntypedFormControl({value: true, disabled: true}),
-        testValue4: new UntypedFormControl({value: false, disabled: true}),
+    testForm = new FormGroup({
+        testValue1: new FormControl(true),
+        testValue2: new FormControl(false),
+        testValue3: new FormControl({value: true, disabled: true}),
+        testValue4: new FormControl({value: false, disabled: true}),
     });
 }
diff --git a/projects/demo/src/modules/components/checkbox/examples/2/index.ts b/projects/demo/src/modules/components/checkbox/examples/2/index.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {UntypedFormControl, UntypedFormGroup} from '@angular/forms';
+import {FormControl, FormGroup} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 
@@ -10,10 +10,10 @@ import {encapsulation} from '@demo/emulate/encapsulation';
     changeDetection,
 })
 export class TuiCheckboxExample2 {
-    testForm = new UntypedFormGroup({
-        testValue1: new UntypedFormControl(true),
-        testValue2: new UntypedFormControl(false),
-        testValue3: new UntypedFormControl({value: true, disabled: true}),
-        testValue4: new UntypedFormControl({value: false, disabled: true}),
+    testForm = new FormGroup({
+        testValue1: new FormControl(true),
+        testValue2: new FormControl(false),
+        testValue3: new FormControl({value: true, disabled: true}),
+        testValue4: new FormControl({value: false, disabled: true}),
     });
 }
diff --git a/projects/demo/src/modules/components/combo-box/combo-box.component.ts b/projects/demo/src/modules/components/combo-box/combo-box.component.ts
@@ -1,5 +1,5 @@
 import {Component, forwardRef, ViewChild} from '@angular/core';
-import {UntypedFormControl, Validators} from '@angular/forms';
+import {FormControl, Validators} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDocExample, tuiDocExcludeProperties} from '@taiga-ui/addon-doc';
 import {
@@ -141,7 +141,7 @@ export class ExampleTuiComboBoxComponent extends AbstractExampleTuiControl {
 
     identityMatcher = this.identityMatcherVariants[0];
 
-    readonly control = new UntypedFormControl(null, Validators.required);
+    readonly control = new FormControl<Account | null>(null, Validators.required);
 
     get valueContent(): PolymorpheusContent<TuiValueContentContext<Account>> {
         return this.valueTemplateRef && this.selectedValueTemplate

diff --git a/projects/demo/src/modules/components/combo-box/examples/1/index.ts b/projects/demo/src/modules/components/combo-box/examples/1/index.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {UntypedFormControl} from '@angular/forms';
+import {FormControl} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {assets} from '@demo/utils';
@@ -41,7 +41,7 @@ export class TuiComboBoxExample1 {
         startWith(databaseMockData),
     );
 
-    readonly testValue = new UntypedFormControl(databaseMockData[1]);
+    readonly testValue = new FormControl(databaseMockData[1]);
 
     onSearchChange(searchQuery: string | null): void {
         this.search$.next(searchQuery);

diff --git a/projects/demo/src/modules/components/combo-box/examples/2/index.ts b/projects/demo/src/modules/components/combo-box/examples/2/index.ts
@@ -1,5 +1,5 @@
 import {Component, Inject} from '@angular/core';
-import {UntypedFormControl} from '@angular/forms';
+import {FormControl} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDestroyService} from '@taiga-ui/cdk';
 
@@ -16,7 +16,7 @@ import {RequestService} from './request.service';
 export class TuiComboBoxExample2 {
     search: string | null = '';
 
-    readonly control = new UntypedFormControl(databaseMockData[0]);
+    readonly control = new FormControl(databaseMockData[0]);
 
     constructor(@Inject(RequestService) readonly service: RequestService) {}
 }
diff --git a/projects/demo/src/modules/components/combo-box/examples/6/index.ts b/projects/demo/src/modules/components/combo-box/examples/6/index.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {UntypedFormControl} from '@angular/forms';
+import {FormControl} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiStringHandler} from '@taiga-ui/cdk';
@@ -25,7 +25,7 @@ const STRINGIFY_EMPLOYEE: TuiStringHandler<Employee> = (item: Employee) =>
     providers: [tuiItemsHandlersProvider({stringify: STRINGIFY_EMPLOYEE})],
 })
 export class TuiComboBoxExample6 {
-    readonly testValue = new UntypedFormControl(null);
+    readonly testValue = new FormControl<Employee | null>(null);
 
     readonly items: readonly Employee[] = [
         {id: 42, name: 'John Cleese', dept: {id: 566, title: 'Financial'}},

diff --git a/projects/demo/src/modules/components/data-list-wrapper/examples/1/index.ts b/projects/demo/src/modules/components/data-list-wrapper/examples/1/index.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {UntypedFormControl} from '@angular/forms';
+import {FormControl} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiBooleanHandler} from '@taiga-ui/cdk';
@@ -11,7 +11,7 @@ import {TuiBooleanHandler} from '@taiga-ui/cdk';
     changeDetection,
 })
 export class TuiDataListWrapperExample1 {
-    readonly control = new UntypedFormControl();
+    readonly control = new FormControl('');
 
     readonly items = [
         'John Cleese',

diff --git a/projects/demo/src/modules/components/data-list-wrapper/examples/2/index.ts b/projects/demo/src/modules/components/data-list-wrapper/examples/2/index.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {UntypedFormControl} from '@angular/forms';
+import {FormControl} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 
@@ -10,7 +10,7 @@ import {encapsulation} from '@demo/emulate/encapsulation';
     changeDetection,
 })
 export class TuiDataListWrapperExample2 {
-    readonly control = new UntypedFormControl();
+    readonly control = new FormControl<{name: string; surname: string} | null>(null);
 
     readonly items = [
         {name: 'John', surname: 'Cleese'},