From 74a1318c5a4f2de49e2e0f1dc285588d1f2d9974 Mon Sep 17 00:00:00 2001 From: HyperLifelll9 Date: Tue, 12 Sep 2023 10:26:24 +0800 Subject: [PATCH] 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 --- components/cascader/demo/reactive-form.ts | 20 +++--- components/cron-expression/demo/use.ts | 26 ++++---- components/form/demo/advanced-search.ts | 10 ++- components/form/demo/auto-tips.ts | 22 ++++--- components/form/demo/coordinated.ts | 25 ++++--- components/form/demo/dynamic-form-item.ts | 14 ++-- components/form/demo/dynamic-rule.ts | 38 +++++------ components/form/demo/horizontal-login.ts | 26 ++++---- components/form/demo/label-align.ts | 26 ++++---- components/form/demo/label-wrap.ts | 26 ++++---- components/form/demo/layout.ts | 32 ++++----- components/form/demo/normal-login.ts | 26 ++++---- components/form/demo/register.ts | 47 ++++++++----- components/form/demo/time-related-controls.ts | 35 +++++----- components/form/demo/validate-reactive.ts | 32 +++++---- .../demo/textarea-with-character-count.ts | 14 ++-- components/mention/demo/form.ts | 20 +++--- components/table/demo/dynamic-settings.ts | 66 ++++++++++--------- components/water-mark/demo/custom.ts | 37 ++++++----- 19 files changed, 287 insertions(+), 255 deletions(-) diff --git a/components/cascader/demo/reactive-form.ts b/components/cascader/demo/reactive-form.ts index a283cd66014..4df85e7f0f2 100644 --- 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 }> = this.fb.group({ + name: this.fb.control(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 index 32bd0d517c1..7de509d63ff 100644 --- 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 ` }) -export class NzDemoCronExpressionUseComponent implements OnInit { - validateForm!: UntypedFormGroup; +export class NzDemoCronExpressionUseComponent { + validateForm: FormGroup<{ + userName: FormControl; + cronLinux: FormControl; + cronSpring: FormControl; + }> = 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 index c7dbea08b17..bc2e69044d9 100644 --- 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
Search Result List
`, - styles: [ ` .ant-advanced-search-form { @@ -73,7 +72,7 @@ import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angul ] }) export class NzDemoFormAdvancedSearchComponent implements OnInit { - validateForm!: UntypedFormGroup; + validateForm: FormRecord> = 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 index c0a7dec26a5..3aeec3e5bc6 100644 --- 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; + mobile: FormControl; + email: FormControl; + password: FormControl; + confirm: FormControl; + }>; // 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) => { 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 index 1f0848e31d5..6b306e4598e 100644 --- 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; + gender: FormControl<'male' | 'male' | null>; + }> = this.fb.group({ + note: this.fb.control(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 index 8e9cce08f12..6fefe2c6ef2 100644 --- 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> = 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 index 46c920941d9..5088adeec43 100644 --- 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 - + Nickname @@ -34,8 +34,16 @@ import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms ` }) -export class NzDemoFormDynamicRuleComponent implements OnInit { - validateForm!: UntypedFormGroup; +export class NzDemoFormDynamicRuleComponent { + validateForm: FormGroup<{ + name: FormControl; + nickname: FormControl; + required: FormControl; + }> = 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 index 46f66764c7f..5c475d54159 100644 --- 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 ` }) -export class NzDemoFormHorizontalLoginComponent implements OnInit { - validateForm!: UntypedFormGroup; +export class NzDemoFormHorizontalLoginComponent { + validateForm: FormGroup<{ + userName: FormControl; + password: FormControl; + remember: FormControl; + }> = 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) {} } diff --git a/components/form/demo/label-align.ts b/components/form/demo/label-align.ts index c61ae2c55a8..1eb2c3c58a7 100644 --- a/components/form/demo/label-align.ts +++ b/components/form/demo/label-align.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-label-align', @@ -20,20 +20,20 @@ import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms ` }) -export class NzDemoFormLabelAlignComponent implements OnInit { - validateForm!: UntypedFormGroup; +export class NzDemoFormLabelAlignComponent { + validateForm: FormGroup<{ + userName: FormControl; + password: FormControl; + remember: FormControl; + }> = 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) {} } diff --git a/components/form/demo/label-wrap.ts b/components/form/demo/label-wrap.ts index d3677c0a942..81ad68e7946 100644 --- a/components/form/demo/label-wrap.ts +++ b/components/form/demo/label-wrap.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-label-wrap', @@ -27,20 +27,20 @@ import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms ` }) -export class NzDemoFormLabelWrapComponent implements OnInit { - validateForm!: UntypedFormGroup; +export class NzDemoFormLabelWrapComponent { + validateForm: FormGroup<{ + userName: FormControl; + password: FormControl; + remember: FormControl; + }> = 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) {} } diff --git a/components/form/demo/layout.ts b/components/form/demo/layout.ts index e07133f28c9..ae670d09421 100644 --- a/components/form/demo/layout.ts +++ b/components/form/demo/layout.ts @@ -1,12 +1,14 @@ -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'; + +import { NzFormLayoutType } from 'ng-zorro-antd/form'; @Component({ selector: 'nz-demo-form-layout', template: `
@@ -47,8 +49,16 @@ import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms ` ] }) -export class NzDemoFormLayoutComponent implements OnInit { - validateForm!: UntypedFormGroup; +export class NzDemoFormLayoutComponent { + validateForm: FormGroup<{ + formLayout: FormControl; + fieldA: FormControl; + filedB: FormControl; + }> = this.fb.group({ + formLayout: 'horizontal' as NzFormLayoutType, + fieldA: ['', [Validators.required]], + filedB: ['', [Validators.required]] + }); submitForm(): void { if (this.validateForm.valid) { @@ -64,16 +74,8 @@ export class NzDemoFormLayoutComponent implements OnInit { } get isHorizontal(): boolean { - return this.validateForm.controls.formLayout?.value === 'horizontal'; + return this.validateForm.controls.formLayout.value === 'horizontal'; } - constructor(private fb: UntypedFormBuilder) {} - - ngOnInit(): void { - this.validateForm = this.fb.group({ - formLayout: ['horizontal'], - fieldA: [null, [Validators.required]], - filedB: [null, [Validators.required]] - }); - } + constructor(private fb: NonNullableFormBuilder) {} } diff --git a/components/form/demo/normal-login.ts b/components/form/demo/normal-login.ts index 40883c3eae1..b7b68886d46 100644 --- a/components/form/demo/normal-login.ts +++ b/components/form/demo/normal-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-normal-login', @@ -54,8 +54,16 @@ import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms ` ] }) -export class NzDemoFormNormalLoginComponent implements OnInit { - validateForm!: UntypedFormGroup; +export class NzDemoFormNormalLoginComponent { + validateForm: FormGroup<{ + userName: FormControl; + password: FormControl; + remember: FormControl; + }> = this.fb.group({ + userName: ['', [Validators.required]], + password: ['', [Validators.required]], + remember: [true] + }); submitForm(): void { if (this.validateForm.valid) { @@ -70,13 +78,5 @@ export class NzDemoFormNormalLoginComponent implements OnInit { } } - 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) {} } diff --git a/components/form/demo/register.ts b/components/form/demo/register.ts index 7d2a8a1e17f..c79f25294d0 100644 --- a/components/form/demo/register.ts +++ b/components/form/demo/register.ts @@ -1,5 +1,12 @@ -import { Component, OnInit } from '@angular/core'; -import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms'; +import { Component } from '@angular/core'; +import { + AbstractControl, + FormControl, + FormGroup, + NonNullableFormBuilder, + ValidatorFn, + Validators +} from '@angular/forms'; import { NzFormTooltipIcon } from 'ng-zorro-antd/form'; @@ -137,8 +144,18 @@ import { NzFormTooltipIcon } from 'ng-zorro-antd/form'; ` ] }) -export class NzDemoFormRegisterComponent implements OnInit { - validateForm!: UntypedFormGroup; +export class NzDemoFormRegisterComponent { + validateForm: FormGroup<{ + email: FormControl; + password: FormControl; + checkPassword: FormControl; + nickname: FormControl; + phoneNumberPrefix: FormControl<'+86' | '+87'>; + phoneNumber: FormControl; + website: FormControl; + captcha: FormControl; + agree: FormControl; + }>; captchaTooltipIcon: NzFormTooltipIcon = { type: 'info-circle', theme: 'twotone' @@ -162,7 +179,7 @@ export class NzDemoFormRegisterComponent implements OnInit { Promise.resolve().then(() => this.validateForm.controls.checkPassword.updateValueAndValidity()); } - confirmationValidator = (control: UntypedFormControl): { [s: string]: boolean } => { + confirmationValidator: ValidatorFn = (control: AbstractControl): { [s: string]: boolean } => { if (!control.value) { return { required: true }; } else if (control.value !== this.validateForm.controls.password.value) { @@ -175,18 +192,16 @@ export class NzDemoFormRegisterComponent implements OnInit { e.preventDefault(); } - constructor(private fb: UntypedFormBuilder) {} - - ngOnInit(): void { + constructor(private fb: NonNullableFormBuilder) { this.validateForm = this.fb.group({ - email: [null, [Validators.email, Validators.required]], - password: [null, [Validators.required]], - checkPassword: [null, [Validators.required, this.confirmationValidator]], - nickname: [null, [Validators.required]], - phoneNumberPrefix: ['+86'], - phoneNumber: [null, [Validators.required]], - website: [null, [Validators.required]], - captcha: [null, [Validators.required]], + email: ['', [Validators.email, Validators.required]], + password: ['', [Validators.required]], + checkPassword: ['', [Validators.required, this.confirmationValidator]], + nickname: ['', [Validators.required]], + phoneNumberPrefix: '+86' as '+86' | '+87', + phoneNumber: ['', [Validators.required]], + website: ['', [Validators.required]], + captcha: ['', [Validators.required]], agree: [false] }); } diff --git a/components/form/demo/time-related-controls.ts b/components/form/demo/time-related-controls.ts index 5935e1ce403..673e9b539c8 100644 --- a/components/form/demo/time-related-controls.ts +++ b/components/form/demo/time-related-controls.ts @@ -1,5 +1,5 @@ -import { Component, OnInit } from '@angular/core'; -import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; +import { Component } from '@angular/core'; +import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; @Component({ selector: 'nz-demo-form-time-related-controls', @@ -56,23 +56,26 @@ import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; ` ] }) -export class NzDemoFormTimeRelatedControlsComponent implements OnInit { - validateForm!: UntypedFormGroup; +export class NzDemoFormTimeRelatedControlsComponent { + validateForm: FormGroup<{ + datePicker: FormControl; + datePickerTime: FormControl; + monthPicker: FormControl; + rangePicker: FormControl<[Date, Date] | null>; + rangePickerTime: FormControl<[Date, Date] | null>; + timePicker: FormControl; + }> = this.fb.group({ + datePicker: this.fb.control(null), + datePickerTime: this.fb.control(null), + monthPicker: this.fb.control(null), + rangePicker: this.fb.control<[Date, Date] | null>(null), + rangePickerTime: this.fb.control<[Date, Date] | null>(null), + timePicker: this.fb.control(null) + }); submitForm(): void { console.log(this.validateForm.value); } - constructor(private fb: UntypedFormBuilder) {} - - ngOnInit(): void { - this.validateForm = this.fb.group({ - datePicker: [null], - datePickerTime: [null], - monthPicker: [null], - rangePicker: [[]], - rangePickerTime: [[]], - timePicker: [null] - }); - } + constructor(private fb: FormBuilder) {} } diff --git a/components/form/demo/validate-reactive.ts b/components/form/demo/validate-reactive.ts index 5b24000f91e..5015d7fa443 100644 --- a/components/form/demo/validate-reactive.ts +++ b/components/form/demo/validate-reactive.ts @@ -1,5 +1,14 @@ import { Component } from '@angular/core'; -import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, ValidationErrors, Validators } from '@angular/forms'; +import { + AbstractControl, + AsyncValidatorFn, + FormControl, + FormGroup, + NonNullableFormBuilder, + ValidationErrors, + ValidatorFn, + Validators +} from '@angular/forms'; import { Observable, Observer } from 'rxjs'; @Component({ @@ -72,7 +81,13 @@ import { Observable, Observer } from 'rxjs'; ] }) export class NzDemoFormValidateReactiveComponent { - validateForm: UntypedFormGroup; + validateForm: FormGroup<{ + userName: FormControl; + email: FormControl; + password: FormControl; + confirm: FormControl; + comment: FormControl; + }>; submitForm(): void { console.log('submit', this.validateForm.value); @@ -81,20 +96,13 @@ export class NzDemoFormValidateReactiveComponent { resetForm(e: MouseEvent): void { e.preventDefault(); this.validateForm.reset(); - for (const key in this.validateForm.controls) { - if (this.validateForm.controls.hasOwnProperty(key)) { - this.validateForm.controls[key].markAsPristine(); - this.validateForm.controls[key].updateValueAndValidity(); - } - } } validateConfirmPassword(): void { 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) => { setTimeout(() => { if (control.value === 'JasonWood') { @@ -107,7 +115,7 @@ export class NzDemoFormValidateReactiveComponent { }, 1000); }); - confirmValidator = (control: UntypedFormControl): { [s: string]: boolean } => { + confirmValidator: ValidatorFn = (control: AbstractControl) => { if (!control.value) { return { error: true, required: true }; } else if (control.value !== this.validateForm.controls.password.value) { @@ -116,7 +124,7 @@ export class NzDemoFormValidateReactiveComponent { return {}; }; - constructor(private fb: UntypedFormBuilder) { + constructor(private fb: NonNullableFormBuilder) { this.validateForm = this.fb.group({ userName: ['', [Validators.required], [this.userNameAsyncValidator]], email: ['', [Validators.email, Validators.required]], diff --git a/components/input/demo/textarea-with-character-count.ts b/components/input/demo/textarea-with-character-count.ts index 67ebe5e2f63..d18f243d370 100644 --- a/components/input/demo/textarea-with-character-count.ts +++ b/components/input/demo/textarea-with-character-count.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; +import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'nz-demo-input-textarea-with-character-count', @@ -16,11 +16,11 @@ import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms ` }) export class NzDemoInputTextareaWithCharacterCountComponent { - form: UntypedFormGroup; + form: FormGroup<{ + comment: FormControl; + }> = this.formBuilder.group({ + comment: ['', [Validators.maxLength(100)]] + }); - constructor(private formBuilder: UntypedFormBuilder) { - this.form = this.formBuilder.group({ - comment: [null, [Validators.maxLength(100)]] - }); - } + constructor(private formBuilder: FormBuilder) {} } diff --git a/components/mention/demo/form.ts b/components/mention/demo/form.ts index 3a926d1483b..f265da1c9bb 100644 --- a/components/mention/demo/form.ts +++ b/components/mention/demo/form.ts @@ -1,5 +1,5 @@ -import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; -import { AbstractControl, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms'; +import { Component, ViewChild, ViewEncapsulation } from '@angular/core'; +import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms'; import { NzMentionComponent } from 'ng-zorro-antd/mention'; @@ -33,24 +33,22 @@ import { NzMentionComponent } from 'ng-zorro-antd/mention'; ` }) -export class NzDemoMentionFormComponent implements OnInit { +export class NzDemoMentionFormComponent { suggestions = ['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']; - validateForm!: UntypedFormGroup; + validateForm: FormGroup<{ mention: FormControl }>; @ViewChild('mentions', { static: true }) mentionChild!: NzMentionComponent; - get mention(): AbstractControl { - return this.validateForm.get('mention')!; + get mention(): FormControl { + return this.validateForm.controls.mention; } - constructor(private fb: UntypedFormBuilder) {} - - ngOnInit(): void { + constructor(private fb: FormBuilder) { this.validateForm = this.fb.group({ mention: ['@afc163 ', [Validators.required, this.mentionValidator]] }); } - mentionValidator = (control: UntypedFormControl): { [s: string]: boolean } => { + mentionValidator: ValidatorFn = (control: AbstractControl) => { if (!control.value) { return { required: true }; } else if (this.mentionChild.getMentions().length < 2) { @@ -71,7 +69,7 @@ export class NzDemoMentionFormComponent implements OnInit { } resetForm(): void { - this.validateForm?.reset({ + this.validateForm.reset({ mention: '@afc163 ' }); } diff --git a/components/table/demo/dynamic-settings.ts b/components/table/demo/dynamic-settings.ts index 00b90706af2..9791199cf34 100644 --- a/components/table/demo/dynamic-settings.ts +++ b/components/table/demo/dynamic-settings.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; +import { FormControl, FormGroup, NonNullableFormBuilder } from '@angular/forms'; import { NzTableLayout, NzTablePaginationPosition, NzTablePaginationType, NzTableSize } from 'ng-zorro-antd/table'; @@ -13,6 +13,8 @@ interface ItemData { disabled?: boolean; } +type TableScroll = 'unset' | 'scroll' | 'fixed'; + interface Setting { bordered: boolean; loading: boolean; @@ -28,7 +30,7 @@ interface Setting { ellipsis: boolean; simple: boolean; size: NzTableSize; - tableScroll: string; + tableScroll: TableScroll; tableLayout: NzTableLayout; position: NzTablePaginationPosition; paginationType: NzTablePaginationType; @@ -38,7 +40,7 @@ interface Setting { selector: 'nz-demo-table-dynamic-settings', template: `
-
+ {{ switch.name }} @@ -124,7 +126,7 @@ interface Setting { ] }) export class NzDemoTableDynamicSettingsComponent implements OnInit { - settingForm?: UntypedFormGroup; + settingForm: FormGroup<{ [K in keyof Setting]: FormControl }>; listOfData: readonly ItemData[] = []; displayData: readonly ItemData[] = []; allChecked = false; @@ -132,7 +134,7 @@ export class NzDemoTableDynamicSettingsComponent implements OnInit { fixedColumn = false; scrollX: string | null = null; scrollY: string | null = null; - settingValue!: Setting; + settingValue: Setting; listOfSwitch = [ { name: 'Bordered', formControlName: 'bordered' }, { name: 'Loading', formControlName: 'loading' }, @@ -231,39 +233,43 @@ export class NzDemoTableDynamicSettingsComponent implements OnInit { return data; } - constructor(private formBuilder: UntypedFormBuilder) {} + constructor(private formBuilder: NonNullableFormBuilder) { + this.settingForm = this.formBuilder.group({ + bordered: [false], + loading: [false], + pagination: [true], + sizeChanger: [false], + title: [true], + header: [true], + footer: [true], + expandable: [true], + checkbox: [true], + fixHeader: [false], + noResult: [false], + ellipsis: [false], + simple: [false], + size: 'small' as NzTableSize, + paginationType: 'default' as NzTablePaginationType, + tableScroll: 'unset' as TableScroll, + tableLayout: 'auto' as NzTableLayout, + position: 'bottom' as NzTablePaginationPosition + }); + + this.settingValue = this.settingForm.value as Setting; + } ngOnInit(): void { - this.settingForm = this.formBuilder.group({ - bordered: false, - loading: false, - pagination: true, - sizeChanger: false, - title: true, - header: true, - footer: true, - expandable: true, - checkbox: true, - fixHeader: false, - noResult: false, - ellipsis: false, - simple: false, - size: 'small', - paginationType: 'default', - tableScroll: 'unset', - tableLayout: 'auto', - position: 'bottom' + this.settingForm.valueChanges.subscribe(value => { + this.settingValue = value as Setting; }); - this.settingValue = this.settingForm.value; - this.settingForm.valueChanges.subscribe(value => (this.settingValue = value)); - this.settingForm.get('tableScroll')!.valueChanges.subscribe(scroll => { + this.settingForm.controls.tableScroll.valueChanges.subscribe(scroll => { this.fixedColumn = scroll === 'fixed'; this.scrollX = scroll === 'scroll' || scroll === 'fixed' ? '100vw' : null; }); - this.settingForm.get('fixHeader')!.valueChanges.subscribe(fixed => { + this.settingForm.controls.fixHeader.valueChanges.subscribe(fixed => { this.scrollY = fixed ? '240px' : null; }); - this.settingForm.get('noResult')!.valueChanges.subscribe(empty => { + this.settingForm.controls.noResult.valueChanges.subscribe(empty => { if (empty) { this.listOfData = []; } else { diff --git a/components/water-mark/demo/custom.ts b/components/water-mark/demo/custom.ts index 4c5c87e6d04..6bec53f6621 100644 --- a/components/water-mark/demo/custom.ts +++ b/components/water-mark/demo/custom.ts @@ -1,5 +1,5 @@ import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; -import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; +import { FormControl, FormGroup, NonNullableFormBuilder } from '@angular/forms'; import { ColorEvent } from 'ngx-color/color-wrap.component'; @@ -10,9 +10,9 @@ import { FontType } from 'ng-zorro-antd/water-mark'; template: `
; + fontSize: FormControl; + zIndex: FormControl; + rotate: FormControl; + gapX: FormControl; + gapY: FormControl; + offsetX: FormControl; + offsetY: FormControl; + }>; color: string = 'rgba(0,0,0,.15)'; font: FontType = { color: 'rgba(0,0,0,.15)', fontSize: 16 }; - zIndex: number = 11; - rotate: number = -22; gap: [number, number] = [100, 100]; offset: [number, number] = [50, 50]; - constructor(private fb: UntypedFormBuilder, private cdr: ChangeDetectorRef) {} - - ngOnInit(): void { + constructor(private fb: NonNullableFormBuilder, private cdr: ChangeDetectorRef) { this.validateForm = this.fb.group({ content: ['NG Ant Design'], fontSize: [16], @@ -165,17 +169,16 @@ export class NzDemoWaterMarkCustomComponent implements OnInit { offsetX: [50], offsetY: [50] }); + } + ngOnInit(): void { this.validateForm.valueChanges.subscribe(item => { - this.content = item.content; this.font = { fontSize: item.fontSize, color: this.color }; - this.zIndex = item.zIndex; - this.rotate = item.rotate; - this.gap = [item.gapX, item.gapY]; - this.offset = [item.offsetX, item.offsetY]; + this.gap = [item.gapX!, item.gapY!]; + this.offset = [item.offsetX!, item.offsetY!]; this.cdr.markForCheck(); }); } @@ -183,7 +186,7 @@ export class NzDemoWaterMarkCustomComponent implements OnInit { changeColor(value: ColorEvent): void { this.color = value.color.hex; this.font = { - fontSize: this.validateForm.get('fontSize')?.value, + fontSize: this.validateForm.controls.fontSize.value, color: value.color.hex }; this.cdr.markForCheck();