docs(*): migrate to typed form (#8025)

* docs(module:cascader): migrate to typed form * docs(module:cron-expression): migrate to typed form * docs(module:form): migrate to typed form * docs(module:input): migrate to typed form * docs(module:mention): migrate to typed form * docs(module:table): migrate to typed form * docs(module:water-mark): migrate to typed from
NG-ZORRO · Sep 12, 2023 · 74a1318 · 74a1318
1 parent 68cb4b2
commit 74a1318
Show file tree

Hide file tree

Showing 19 changed files with 287 additions and 255 deletions.
diff --git a/components/cascader/demo/reactive-form.ts b/components/cascader/demo/reactive-form.ts
@@ -1,5 +1,5 @@
 import { Component, OnDestroy } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { Subscription } from 'rxjs';
 
 import { NzCascaderOption } from 'ng-zorro-antd/cascader';
@@ -65,23 +65,19 @@ const options = [
   ]
 })
 export class NzDemoCascaderReactiveFormComponent implements OnDestroy {
-  form!: UntypedFormGroup;
+  form: FormGroup<{ name: FormControl<string[] | null> }> = this.fb.group({
+    name: this.fb.control<string[] | null>(null, Validators.required)
+  });
   nzOptions: NzCascaderOption[] = options;
   changeSubscription: Subscription;
-  constructor(private fb: UntypedFormBuilder) {
-    this.createForm();
-    const control = this.form.get('name') as UntypedFormControl;
+
+  constructor(private fb: FormBuilder) {
+    const control = this.form.controls.name;
     this.changeSubscription = control.valueChanges.subscribe(data => {
       this.onChanges(data);
     });
   }
 
-  private createForm(): void {
-    this.form = this.fb.group({
-      name: [null, Validators.required]
-    });
-  }
-
   reset(): void {
     this.form.reset();
     console.log(this.form.value);
@@ -91,7 +87,7 @@ export class NzDemoCascaderReactiveFormComponent implements OnDestroy {
     console.log(this.form.value);
   }
 
-  onChanges(values: string[]): void {
+  onChanges(values: string[] | null): void {
     console.log(values);
   }
 

diff --git a/components/cron-expression/demo/use.ts b/components/cron-expression/demo/use.ts
@@ -1,5 +1,5 @@
-import { Component, OnInit } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { Component } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 
 @Component({
   selector: 'nz-demo-cron-expression-use',
@@ -31,18 +31,18 @@ import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms
     </form>
   `
 })
-export class NzDemoCronExpressionUseComponent implements OnInit {
-  validateForm!: UntypedFormGroup;
+export class NzDemoCronExpressionUseComponent {
+  validateForm: FormGroup<{
+    userName: FormControl<string | null>;
+    cronLinux: FormControl<string | null>;
+    cronSpring: FormControl<string | null>;
+  }> = this.fb.group({
+    userName: ['cron-expression', [Validators.required]],
+    cronLinux: ['* 1 * * *', [Validators.required]],
+    cronSpring: ['0 * 1 * * *', [Validators.required]]
+  });
 
-  constructor(private fb: UntypedFormBuilder) {}
-
-  ngOnInit(): void {
-    this.validateForm = this.fb.group({
-      userName: ['cron-expression', [Validators.required]],
-      cronLinux: ['* 1 * * *', [Validators.required]],
-      cronSpring: ['0 * 1 * * *', [Validators.required]]
-    });
-  }
+  constructor(private fb: FormBuilder) {}
 
   submitForm(): void {
     console.log(this.validateForm.value);

diff --git a/components/form/demo/advanced-search.ts b/components/form/demo/advanced-search.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
+import { FormControl, FormRecord, NonNullableFormBuilder } from '@angular/forms';
 
 @Component({
   selector: 'nz-demo-form-advanced-search',
@@ -33,7 +33,6 @@ import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angul
     </form>
     <div class="search-result-list">Search Result List</div>
   `,
-
   styles: [
     `
       .ant-advanced-search-form {
@@ -73,7 +72,7 @@ import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angul
   ]
 })
 export class NzDemoFormAdvancedSearchComponent implements OnInit {
-  validateForm!: UntypedFormGroup;
+  validateForm: FormRecord<FormControl<string>> = this.fb.record({});
   controlArray: Array<{ index: number; show: boolean }> = [];
   isCollapse = true;
 
@@ -88,13 +87,12 @@ export class NzDemoFormAdvancedSearchComponent implements OnInit {
     this.validateForm.reset();
   }
 
-  constructor(private fb: UntypedFormBuilder) {}
+  constructor(private fb: NonNullableFormBuilder) {}
 
   ngOnInit(): void {
-    this.validateForm = this.fb.group({});
     for (let i = 0; i < 10; i++) {
       this.controlArray.push({ index: i, show: i < 6 });
-      this.validateForm.addControl(`field${i}`, new UntypedFormControl());
+      this.validateForm.addControl(`field${i}`, this.fb.control(''));
     }
   }
 }
diff --git a/components/form/demo/auto-tips.ts b/components/form/demo/auto-tips.ts
@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
 import {
   AbstractControl,
-  UntypedFormBuilder,
-  UntypedFormControl,
-  UntypedFormGroup,
+  AsyncValidatorFn,
+  FormControl,
+  FormGroup,
+  NonNullableFormBuilder,
   ValidatorFn,
   Validators
 } from '@angular/forms';
@@ -65,7 +66,13 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
   ]
 })
 export class NzDemoFormAutoTipsComponent {
-  validateForm: UntypedFormGroup;
+  validateForm: FormGroup<{
+    userName: FormControl<string>;
+    mobile: FormControl<string>;
+    email: FormControl<string>;
+    password: FormControl<string>;
+    confirm: FormControl<string>;
+  }>;
 
   // current locale is key of the nzAutoTips
   // if it is not found, it will be searched again with `default`
@@ -98,8 +105,7 @@ export class NzDemoFormAutoTipsComponent {
     setTimeout(() => this.validateForm.controls.confirm.updateValueAndValidity());
   }
 
-  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-  userNameAsyncValidator = (control: UntypedFormControl) =>
+  userNameAsyncValidator: AsyncValidatorFn = (control: AbstractControl) =>
     new Observable((observer: Observer<MyValidationErrors | null>) => {
       setTimeout(() => {
         if (control.value === 'JasonWood') {
@@ -113,7 +119,7 @@ export class NzDemoFormAutoTipsComponent {
       }, 1000);
     });
 
-  confirmValidator = (control: UntypedFormControl): { [s: string]: boolean } => {
+  confirmValidator: ValidatorFn = (control: AbstractControl): { [s: string]: boolean } => {
     if (!control.value) {
       return { error: true, required: true };
     } else if (control.value !== this.validateForm.controls.password.value) {
@@ -122,7 +128,7 @@ export class NzDemoFormAutoTipsComponent {
     return {};
   };
 
-  constructor(private fb: UntypedFormBuilder) {
+  constructor(private fb: NonNullableFormBuilder) {
     // use `MyValidators`
     const { required, maxLength, minLength, email, mobile } = MyValidators;
     this.validateForm = this.fb.group({

diff --git a/components/form/demo/coordinated.ts b/components/form/demo/coordinated.ts
@@ -1,5 +1,5 @@
-import { Component, OnInit } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { Component } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 
 @Component({
   selector: 'nz-demo-form-coordinated',
@@ -40,8 +40,14 @@ import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms
     `
   ]
 })
-export class NzDemoFormCoordinatedComponent implements OnInit {
-  validateForm!: UntypedFormGroup;
+export class NzDemoFormCoordinatedComponent {
+  validateForm: FormGroup<{
+    note: FormControl<string | null>;
+    gender: FormControl<'male' | 'male' | null>;
+  }> = this.fb.group({
+    note: this.fb.control<string | null>(null, Validators.required),
+    gender: this.fb.control<'male' | 'male' | null>(null, Validators.required)
+  });
 
   submitForm(): void {
     if (this.validateForm.valid) {
@@ -57,15 +63,8 @@ export class NzDemoFormCoordinatedComponent implements OnInit {
   }
 
   genderChange(value: string): void {
-    this.validateForm.get('note')!.setValue(value === 'male' ? 'Hi, man!' : 'Hi, lady!');
+    this.validateForm.controls.note.setValue(value === 'male' ? 'Hi, man!' : 'Hi, lady!');
   }
 
-  constructor(private fb: UntypedFormBuilder) {}
-
-  ngOnInit(): void {
-    this.validateForm = this.fb.group({
-      note: [null, [Validators.required]],
-      gender: [null, [Validators.required]]
-    });
-  }
+  constructor(private fb: FormBuilder) {}
 }
diff --git a/components/form/demo/dynamic-form-item.ts b/components/form/demo/dynamic-form-item.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
+import { FormControl, FormRecord, NonNullableFormBuilder, Validators } from '@angular/forms';
 
 @Component({
   selector: 'nz-demo-form-dynamic-form-item',
@@ -77,13 +77,12 @@ import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators }
   ]
 })
 export class NzDemoFormDynamicFormItemComponent implements OnInit {
-  validateForm!: UntypedFormGroup;
+  validateForm: FormRecord<FormControl<string>> = this.fb.record({});
   listOfControl: Array<{ id: number; controlInstance: string }> = [];
 
   addField(e?: MouseEvent): void {
-    if (e) {
-      e.preventDefault();
-    }
+    e?.preventDefault();
+
     const id = this.listOfControl.length > 0 ? this.listOfControl[this.listOfControl.length - 1].id + 1 : 0;
 
     const control = {
@@ -94,7 +93,7 @@ export class NzDemoFormDynamicFormItemComponent implements OnInit {
     console.log(this.listOfControl[this.listOfControl.length - 1]);
     this.validateForm.addControl(
       this.listOfControl[index - 1].controlInstance,
-      new UntypedFormControl(null, Validators.required)
+      this.fb.control('', Validators.required)
     );
   }
 
@@ -121,10 +120,9 @@ export class NzDemoFormDynamicFormItemComponent implements OnInit {
     }
   }
 
-  constructor(private fb: UntypedFormBuilder) {}
+  constructor(private fb: NonNullableFormBuilder) {}
 
   ngOnInit(): void {
-    this.validateForm = this.fb.group({});
     this.addField();
   }
 }
diff --git a/components/form/demo/dynamic-rule.ts b/components/form/demo/dynamic-rule.ts
@@ -1,5 +1,5 @@
-import { Component, OnInit } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { Component } from '@angular/core';
+import { FormControl, FormGroup, NonNullableFormBuilder, Validators } from '@angular/forms';
 
 @Component({
   selector: 'nz-demo-form-dynamic-rule',
@@ -12,7 +12,7 @@ import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms
         </nz-form-control>
       </nz-form-item>
       <nz-form-item>
-        <nz-form-label [nzSpan]="4" nzFor="nickname" [nzRequired]="validateForm.get('required')?.value">
+        <nz-form-label [nzSpan]="4" nzFor="nickname" [nzRequired]="validateForm.controls.required.value">
           Nickname
         </nz-form-label>
         <nz-form-control [nzSpan]="8" nzErrorTip="Please input your nickname">
@@ -34,8 +34,16 @@ import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms
     </form>
   `
 })
-export class NzDemoFormDynamicRuleComponent implements OnInit {
-  validateForm!: UntypedFormGroup;
+export class NzDemoFormDynamicRuleComponent {
+  validateForm: FormGroup<{
+    name: FormControl<string>;
+    nickname: FormControl<string>;
+    required: FormControl<boolean>;
+  }> = this.fb.group({
+    name: ['', [Validators.required]],
+    nickname: [''],
+    required: [false]
+  });
 
   submitForm(): void {
     if (this.validateForm.valid) {
@@ -52,22 +60,14 @@ export class NzDemoFormDynamicRuleComponent implements OnInit {
 
   requiredChange(required: boolean): void {
     if (!required) {
-      this.validateForm.get('nickname')!.clearValidators();
-      this.validateForm.get('nickname')!.markAsPristine();
+      this.validateForm.controls.nickname.clearValidators();
+      this.validateForm.controls.nickname.markAsPristine();
     } else {
-      this.validateForm.get('nickname')!.setValidators(Validators.required);
-      this.validateForm.get('nickname')!.markAsDirty();
+      this.validateForm.controls.nickname.setValidators(Validators.required);
+      this.validateForm.controls.nickname.markAsDirty();
     }
-    this.validateForm.get('nickname')!.updateValueAndValidity();
+    this.validateForm.controls.nickname.updateValueAndValidity();
   }
 
-  constructor(private fb: UntypedFormBuilder) {}
-
-  ngOnInit(): void {
-    this.validateForm = this.fb.group({
-      name: [null, [Validators.required]],
-      nickname: [null],
-      required: [false]
-    });
-  }
+  constructor(private fb: NonNullableFormBuilder) {}
 }
diff --git a/components/form/demo/horizontal-login.ts b/components/form/demo/horizontal-login.ts
@@ -1,5 +1,5 @@
-import { Component, OnInit } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { Component } from '@angular/core';
+import { FormControl, FormGroup, NonNullableFormBuilder, Validators } from '@angular/forms';
 
 @Component({
   selector: 'nz-demo-form-horizontal-login',
@@ -27,20 +27,20 @@ import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms
     </form>
   `
 })
-export class NzDemoFormHorizontalLoginComponent implements OnInit {
-  validateForm!: UntypedFormGroup;
+export class NzDemoFormHorizontalLoginComponent {
+  validateForm: FormGroup<{
+    userName: FormControl<string>;
+    password: FormControl<string>;
+    remember: FormControl<boolean>;
+  }> = this.fb.group({
+    userName: ['', [Validators.required]],
+    password: ['', [Validators.required]],
+    remember: [true]
+  });
 
   submitForm(): void {
     console.log('submit', this.validateForm.value);
   }
 
-  constructor(private fb: UntypedFormBuilder) {}
-
-  ngOnInit(): void {
-    this.validateForm = this.fb.group({
-      userName: [null, [Validators.required]],
-      password: [null, [Validators.required]],
-      remember: [true]
-    });
-  }
+  constructor(private fb: NonNullableFormBuilder) {}
 }