fix(forms): migration to typed forms (#860)

allianz · Mar 14, 2023 · b41d419 · b41d419
1 parent 521bf44
commit b41d419
Show file tree

Hide file tree

Showing 103 changed files with 410 additions and 496 deletions.
diff --git a/...cts/ng-aquila/documentation/examples/accordion/accordion-error/accordion-error-example.ts b/...cts/ng-aquila/documentation/examples/accordion/accordion-error/accordion-error-example.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { UntypedFormBuilder, Validators } from '@angular/forms';
+import { FormBuilder, Validators } from '@angular/forms';
 
 /**
  * @title Accordion Error Example
@@ -21,7 +21,7 @@ export class AccordionErrorExampleComponent {
     showErrorPayment = true;
     showErrorInfo = false;
 
-    constructor(private readonly fb: UntypedFormBuilder) {
+    constructor(private readonly fb: FormBuilder) {
         this.formGroupPayment.markAllAsTouched();
     }
 

diff --git a/...tion/examples/autocomplete/autocomplete-data-binding/autocomplete-data-binding-example.ts b/...tion/examples/autocomplete/autocomplete-data-binding/autocomplete-data-binding-example.ts
@@ -1,6 +1,6 @@
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { Component, Injectable } from '@angular/core';
-import { UntypedFormBuilder, Validators } from '@angular/forms';
+import { FormBuilder, Validators } from '@angular/forms';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
@@ -44,7 +44,7 @@ export class WikipediaService {
 export class AutocompleteDataBindingExampleComponent {
     modelBoundData = 'asdf';
 
-    testForm = new UntypedFormBuilder().group({
+    testForm = new FormBuilder().group({
         autocomplete: [null, Validators.required],
     });
 

diff --git a/...la/documentation/examples/card/selectable-card-dynamic/selectable-card-dynamic-example.ts b/...la/documentation/examples/card/selectable-card-dynamic/selectable-card-dynamic-example.ts
@@ -1,9 +1,5 @@
 import { Component } from '@angular/core';
-import {
-    UntypedFormArray,
-    UntypedFormBuilder,
-    UntypedFormControl,
-} from '@angular/forms';
+import { FormArray, FormBuilder, FormControl } from '@angular/forms';
 
 /**
  * @title Selectable cards dynamic example
@@ -14,27 +10,27 @@ import {
     styleUrls: ['./selectable-card-dynamic-example.css'],
 })
 export class SelectableCardDynamicExampleComponent {
-    readonly cardArray = new UntypedFormArray([
-        new UntypedFormControl(false),
-        new UntypedFormControl(false),
-        new UntypedFormControl(false),
+    readonly cardArray = new FormArray([
+        new FormControl(false),
+        new FormControl(false),
+        new FormControl(false),
     ]);
 
     readonly myFormGroup = this.fb.group({
         cards: this.cardArray,
     });
 
-    constructor(private readonly fb: UntypedFormBuilder) {}
+    constructor(private readonly fb: FormBuilder) {}
 
     addNewCard() {
-        this.cardArray.push(new UntypedFormControl(false));
+        this.cardArray.push(new FormControl(false));
     }
 
     removeFirstCard() {
         this.cardArray.removeAt(0);
     }
 
-    get cards(): UntypedFormArray {
-        return this.myFormGroup.get('cards') as UntypedFormArray;
+    get cards(): FormArray {
+        return this.myFormGroup.get('cards') as FormArray;
     }
 }
diff --git a/...uila/documentation/examples/card/selectable-card-expert/selectable-card-expert-example.ts b/...uila/documentation/examples/card/selectable-card-expert/selectable-card-expert-example.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { UntypedFormBuilder, Validators } from '@angular/forms';
+import { FormBuilder, Validators } from '@angular/forms';
 
 /**
  * @title Selectable cards expert example
@@ -14,7 +14,7 @@ export class SelectableCardExpertExampleComponent {
         card: [false, Validators.requiredTrue],
     });
 
-    constructor(private readonly fb: UntypedFormBuilder) {
+    constructor(private readonly fb: FormBuilder) {
         this.formGroup.markAllAsTouched();
     }
 }
diff --git a/.../documentation/examples/card/selectable-card-reactive/selectable-card-reactive-example.ts b/.../documentation/examples/card/selectable-card-reactive/selectable-card-reactive-example.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { UntypedFormBuilder, Validators } from '@angular/forms';
+import { FormBuilder, Validators } from '@angular/forms';
 
 /**
  * @title Selectable cards reactive example
@@ -14,5 +14,5 @@ export class SelectableCardReactiveExampleComponent {
         selectableCardTestReactive: [false, Validators.requiredTrue],
     });
 
-    constructor(private readonly fb: UntypedFormBuilder) {}
+    constructor(private readonly fb: FormBuilder) {}
 }
diff --git a/...uila/documentation/examples/card/selectable-card-states/selectable-card-states-example.ts b/...uila/documentation/examples/card/selectable-card-states/selectable-card-states-example.ts
@@ -1,9 +1,5 @@
 import { Component } from '@angular/core';
-import {
-    AbstractControl,
-    UntypedFormBuilder,
-    Validators,
-} from '@angular/forms';
+import { AbstractControl, FormBuilder, Validators } from '@angular/forms';
 
 /**
  * @title Selectable cards states example
@@ -19,7 +15,7 @@ export class SelectableCardStatesExampleComponent {
         errorCard2: [true, validateSecondCard],
     });
 
-    constructor(private readonly fb: UntypedFormBuilder) {
+    constructor(private readonly fb: FormBuilder) {
         this.formGroup.markAllAsTouched();
     }
 }

diff --git a/.../documentation/examples/checkbox/checkbox-group-dynamic/checkbox-group-dynamic-example.ts b/.../documentation/examples/checkbox/checkbox-group-dynamic/checkbox-group-dynamic-example.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { UntypedFormBuilder, Validators } from '@angular/forms';
+import { FormBuilder, Validators } from '@angular/forms';
 
 /**
  * @title Checkbox group dynamic checkboxes example
@@ -18,7 +18,7 @@ export class CheckboxGroupDynamicExampleComponent {
 
     i = 1;
 
-    constructor(private readonly fb: UntypedFormBuilder) {}
+    constructor(private readonly fb: FormBuilder) {}
 
     addNewCb() {
         this.data.push('Checkbox ' + this.i);

diff --git a/...tion/examples/checkbox/checkbox-group-inheritance/checkbox-group-inheritance-example.html b/...tion/examples/checkbox/checkbox-group-inheritance/checkbox-group-inheritance-example.html
@@ -54,6 +54,6 @@ <h4>Result</h4>
             <nx-checkbox value="Term 5">Checkbox 5</nx-checkbox>
         </nx-checkbox-group>
     </div>
-    <p>Form value: {{ myFormGroup.value | json }}</p>
+    <p>Form value: {{ optionsForm.value | json }}</p>
     <p>Form status: {{ myFormGroup.status | json }}</p>
 </form>
diff --git a/...tation/examples/checkbox/checkbox-group-inheritance/checkbox-group-inheritance-example.ts b/...tation/examples/checkbox/checkbox-group-inheritance/checkbox-group-inheritance-example.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { UntypedFormBuilder, Validators } from '@angular/forms';
+import { FormBuilder, Validators } from '@angular/forms';
 
 /**
  * @title Checkbox group inheritance example
@@ -11,18 +11,18 @@ import { UntypedFormBuilder, Validators } from '@angular/forms';
 })
 export class CheckboxGroupInheritanceExampleComponent {
     readonly optionsForm = this.fb.group({
-        terms: [[]],
-    });
-
-    readonly myFormGroup = this.fb.group({
         isNegative: [false, null],
         isRequired: [false, null],
         isDisabled: [false, null],
         isLarge: [false, null],
         isLabelExpert: [false, null],
     });
 
-    constructor(private readonly fb: UntypedFormBuilder) {}
+    readonly myFormGroup = this.fb.group({
+        terms: [[]],
+    });
+
+    constructor(private readonly fb: FormBuilder) {}
 
     toggleDisabled() {
         const checkboxGroup = this.myFormGroup.get('terms');

diff --git a/...ocumentation/examples/checkbox/checkbox-group-reactive/checkbox-group-reactive-example.ts b/...ocumentation/examples/checkbox/checkbox-group-reactive/checkbox-group-reactive-example.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { UntypedFormBuilder } from '@angular/forms';
+import { FormBuilder } from '@angular/forms';
 
 /**
  * @title Checkbox group reactive example
@@ -14,5 +14,5 @@ export class CheckboxGroupReactiveExampleComponent {
         terms: [],
     });
 
-    constructor(private readonly fb: UntypedFormBuilder) {}
+    constructor(private readonly fb: FormBuilder) {}
 }
diff --git a/...entation/examples/checkbox/checkbox-group-validation/checkbox-group-validation-example.ts b/...entation/examples/checkbox/checkbox-group-validation/checkbox-group-validation-example.ts
@@ -1,9 +1,5 @@
 import { Component } from '@angular/core';
-import {
-    AbstractControl,
-    UntypedFormBuilder,
-    Validators,
-} from '@angular/forms';
+import { AbstractControl, FormBuilder, Validators } from '@angular/forms';
 
 /**
  * @title Checkbox group validation example
@@ -18,7 +14,7 @@ export class CheckboxGroupValidationExampleComponent {
         terms: [[], [Validators.required, this.validateCheckboxes]],
     });
 
-    constructor(private readonly fb: UntypedFormBuilder) {}
+    constructor(private readonly fb: FormBuilder) {}
 
     private validateCheckboxes(control: AbstractControl) {
         if (control.value.length <= 2) {

diff --git a/.../ng-aquila/documentation/examples/checkbox/checkbox-reactive/checkbox-reactive-example.ts b/.../ng-aquila/documentation/examples/checkbox/checkbox-reactive/checkbox-reactive-example.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { UntypedFormBuilder, Validators } from '@angular/forms';
+import { FormBuilder, Validators } from '@angular/forms';
 
 /**
  * @title Reactive example
@@ -14,5 +14,5 @@ export class CheckboxReactiveExampleComponent {
         checkboxTestReactive: [false, Validators.requiredTrue],
     });
 
-    constructor(private readonly fb: UntypedFormBuilder) {}
+    constructor(private readonly fb: FormBuilder) {}
 }
diff --git a/.../circle-toggle/circle-toggle-reactive-disabled/circle-toggle-reactive-disabled-example.ts b/.../circle-toggle/circle-toggle-reactive-disabled/circle-toggle-reactive-disabled-example.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { UntypedFormBuilder, Validators } from '@angular/forms';
+import { FormBuilder, Validators } from '@angular/forms';
 
 /**
  * @title Reactive disabled example
@@ -38,7 +38,7 @@ export class CircleToggleReactiveDisabledExampleComponent {
         },
     ];
 
-    constructor(private readonly fb: UntypedFormBuilder) {
+    constructor(private readonly fb: FormBuilder) {
         this.testForm.disable();
     }
 

diff --git a/...mentation/examples/circle-toggle/circle-toggle-reactive/circle-toggle-reactive-example.ts b/...mentation/examples/circle-toggle/circle-toggle-reactive/circle-toggle-reactive-example.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { UntypedFormBuilder, Validators } from '@angular/forms';
+import { FormBuilder, Validators } from '@angular/forms';
 
 /**
  * @title Reactive example
@@ -10,7 +10,7 @@ import { UntypedFormBuilder, Validators } from '@angular/forms';
     styleUrls: ['./circle-toggle-reactive-example.css'],
 })
 export class CircleToggleReactiveExampleComponent {
-    formBuilder = new UntypedFormBuilder();
+    formBuilder = new FormBuilder();
 
     testForm = this.formBuilder.group({
         reactiveToggle: ['', Validators.required],

diff --git a/...ation/examples/circle-toggle/circle-toggle-validation/circle-toggle-validation-example.ts b/...ation/examples/circle-toggle/circle-toggle-validation/circle-toggle-validation-example.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import {
     AbstractControl,
-    UntypedFormBuilder,
+    FormBuilder,
     ValidatorFn,
     Validators,
 } from '@angular/forms';
@@ -22,7 +22,7 @@ const selectBothValidator: ValidatorFn = (ctrl: AbstractControl) => {
     styleUrls: ['./circle-toggle-validation-example.css'],
 })
 export class CircleToggleValidationExampleComponent {
-    formBuilder = new UntypedFormBuilder();
+    formBuilder = new FormBuilder();
 
     testForm = this.formBuilder.group({
         reactiveToggle: ['', Validators.required],

diff --git a/...uila/documentation/examples/code-input/code-input-disabled/code-input-disabled-example.ts b/...uila/documentation/examples/code-input/code-input-disabled/code-input-disabled-example.ts
@@ -1,9 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import {
-    UntypedFormControl,
-    UntypedFormGroup,
-    Validators,
-} from '@angular/forms';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 
 /**
  * @title Disabled example
@@ -15,11 +11,11 @@ import {
 })
 export class CodeInputDisabledExampleComponent implements OnInit {
     inputValue = '';
-    codeForm!: UntypedFormGroup;
+    codeForm!: FormGroup;
 
     ngOnInit() {
-        this.codeForm = new UntypedFormGroup({
-            keyCode: new UntypedFormControl(
+        this.codeForm = new FormGroup({
+            keyCode: new FormControl(
                 { value: this.inputValue, disabled: true },
                 {
                     validators: [

diff --git a/...la/documentation/examples/code-input/code-input-four-char/code-input-four-char-example.ts b/...la/documentation/examples/code-input/code-input-four-char/code-input-four-char-example.ts
@@ -1,9 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import {
-    UntypedFormControl,
-    UntypedFormGroup,
-    Validators,
-} from '@angular/forms';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 
 /**
  * @title Four character code input example
@@ -15,11 +11,11 @@ import {
 })
 export class CodeInputFourCharExampleComponent implements OnInit {
     inputValue = '';
-    codeForm!: UntypedFormGroup;
+    codeForm!: FormGroup;
 
     ngOnInit() {
-        this.codeForm = new UntypedFormGroup({
-            keyCode: new UntypedFormControl(this.inputValue, {
+        this.codeForm = new FormGroup({
+            keyCode: new FormControl(this.inputValue, {
                 validators: [
                     Validators.required,
                     Validators.pattern('[A-Z]+'),

diff --git a/...uila/documentation/examples/code-input/code-input-localize/code-input-localize-example.ts b/...uila/documentation/examples/code-input/code-input-localize/code-input-localize-example.ts
@@ -1,9 +1,5 @@
 import { Component, Injectable, OnInit } from '@angular/core';
-import {
-    UntypedFormControl,
-    UntypedFormGroup,
-    Validators,
-} from '@angular/forms';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { NxCodeInputIntl } from '@aposin/ng-aquila/code-input';
 
 @Injectable()
@@ -23,11 +19,11 @@ export class MyIntl extends NxCodeInputIntl {
 })
 export class CodeInputLocalizeExampleComponent implements OnInit {
     inputValue = '';
-    codeForm!: UntypedFormGroup;
+    codeForm!: FormGroup;
 
     ngOnInit() {
-        this.codeForm = new UntypedFormGroup({
-            keyCode: new UntypedFormControl(this.inputValue, {
+        this.codeForm = new FormGroup({
+            keyCode: new FormControl(this.inputValue, {
                 validators: [
                     Validators.required,
                     Validators.pattern('[A-Z]+'),

diff --git a/.../ng-aquila/documentation/examples/code-input/code-input-model/code-input-model-example.ts b/.../ng-aquila/documentation/examples/code-input/code-input-model/code-input-model-example.ts
@@ -1,9 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import {
-    UntypedFormControl,
-    UntypedFormGroup,
-    Validators,
-} from '@angular/forms';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -18,8 +14,8 @@ import { takeUntil } from 'rxjs/operators';
 export class CodeInputModelExampleComponent implements OnInit, OnDestroy {
     inputValue = '';
 
-    codeForm = new UntypedFormGroup({
-        keyCode: new UntypedFormControl(this.inputValue, {
+    codeForm = new FormGroup({
+        keyCode: new FormControl(this.inputValue, {
             validators: [Validators.required, Validators.minLength(4)],
             updateOn: 'change',
         }),