diff --git a/components/cascader/demo/reactive-form.ts b/components/cascader/demo/reactive-form.ts
index a283cd6601..4df85e7f0f 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<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
index 32bd0d517c..7de509d63f 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
     </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
index c7dbea08b1..bc2e69044d 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
     </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
index c0a7dec26a..3aeec3e5bc 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<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
index 1f0848e31d..6b306e4598 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<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
index 8e9cce08f1..6fefe2c6ef 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<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
index 46c920941d..5088adeec4 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
         </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
index 46f66764c7..5c475d5415 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
     </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) {}
 }
diff --git a/components/form/demo/label-align.ts b/components/form/demo/label-align.ts
index c61ae2c55a..1eb2c3c58a 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
     </form>
   `
 })
-export class NzDemoFormLabelAlignComponent implements OnInit {
-  validateForm!: UntypedFormGroup;
+export class NzDemoFormLabelAlignComponent {
+  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) {}
 }
diff --git a/components/form/demo/label-wrap.ts b/components/form/demo/label-wrap.ts
index d3677c0a94..81ad68e794 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
     </form>
   `
 })
-export class NzDemoFormLabelWrapComponent implements OnInit {
-  validateForm!: UntypedFormGroup;
+export class NzDemoFormLabelWrapComponent {
+  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) {}
 }
diff --git a/components/form/demo/layout.ts b/components/form/demo/layout.ts
index e07133f28c..ae670d0942 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: `
     <form
       nz-form
-      [nzLayout]="validateForm.get('formLayout')?.value"
+      [nzLayout]="validateForm.controls.formLayout.value"
       [formGroup]="validateForm"
       (ngSubmit)="submitForm()"
     >
@@ -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<NzFormLayoutType>;
+    fieldA: FormControl<string>;
+    filedB: FormControl<string>;
+  }> = 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 40883c3eae..b7b68886d4 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<string>;
+    password: FormControl<string>;
+    remember: FormControl<boolean>;
+  }> = 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 7d2a8a1e17..c79f25294d 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<string>;
+    password: FormControl<string>;
+    checkPassword: FormControl<string>;
+    nickname: FormControl<string>;
+    phoneNumberPrefix: FormControl<'+86' | '+87'>;
+    phoneNumber: FormControl<string>;
+    website: FormControl<string>;
+    captcha: FormControl<string>;
+    agree: FormControl<boolean>;
+  }>;
   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 5935e1ce40..673e9b539c 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<Date | null>;
+    datePickerTime: FormControl<Date | null>;
+    monthPicker: FormControl<Date | null>;
+    rangePicker: FormControl<[Date, Date] | null>;
+    rangePickerTime: FormControl<[Date, Date] | null>;
+    timePicker: FormControl<Date | null>;
+  }> = this.fb.group({
+    datePicker: this.fb.control<Date | null>(null),
+    datePickerTime: this.fb.control<Date | null>(null),
+    monthPicker: this.fb.control<Date | null>(null),
+    rangePicker: this.fb.control<[Date, Date] | null>(null),
+    rangePickerTime: this.fb.control<[Date, Date] | null>(null),
+    timePicker: this.fb.control<Date | null>(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 5b24000f91..5015d7fa44 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<string>;
+    email: FormControl<string>;
+    password: FormControl<string>;
+    confirm: FormControl<string>;
+    comment: FormControl<string>;
+  }>;
 
   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<ValidationErrors | null>) => {
       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 67ebe5e2f6..d18f243d37 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<string | null>;
+  }> = 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 3a926d1483..f265da1c9b 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';
     </form>
   `
 })
-export class NzDemoMentionFormComponent implements OnInit {
+export class NzDemoMentionFormComponent {
   suggestions = ['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご'];
-  validateForm!: UntypedFormGroup;
+  validateForm: FormGroup<{ mention: FormControl<string | null> }>;
   @ViewChild('mentions', { static: true }) mentionChild!: NzMentionComponent;
 
-  get mention(): AbstractControl {
-    return this.validateForm.get('mention')!;
+  get mention(): FormControl<string | null> {
+    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 00b90706af..9791199cf3 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: `
     <div class="components-table-demo-control-bar">
-      <form nz-form nzLayout="inline" [formGroup]="settingForm!">
+      <form nz-form nzLayout="inline" [formGroup]="settingForm">
         <nz-form-item *ngFor="let switch of listOfSwitch">
           <nz-form-label>{{ switch.name }}</nz-form-label>
           <nz-form-control><nz-switch [formControlName]="switch.formControlName"></nz-switch></nz-form-control>
@@ -124,7 +126,7 @@ interface Setting {
   ]
 })
 export class NzDemoTableDynamicSettingsComponent implements OnInit {
-  settingForm?: UntypedFormGroup;
+  settingForm: FormGroup<{ [K in keyof Setting]: FormControl<Setting[K]> }>;
   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 4c5c87e6d0..6bec53f662 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: `
     <div style="display: flex;">
       <nz-water-mark
-        [nzContent]="content"
-        [nzRotate]="rotate"
-        [nzZIndex]="zIndex"
+        [nzContent]="validateForm.value.content!"
+        [nzRotate]="validateForm.value.rotate!"
+        [nzZIndex]="validateForm.value.zIndex!"
         [nzGap]="gap"
         [nzOffset]="offset"
         [nzFont]="font"
@@ -140,21 +140,25 @@ import { FontType } from 'ng-zorro-antd/water-mark';
   ]
 })
 export class NzDemoWaterMarkCustomComponent implements OnInit {
-  validateForm!: UntypedFormGroup;
-  content: string = 'NG Ant Design';
+  validateForm: FormGroup<{
+    content: FormControl<string>;
+    fontSize: FormControl<number>;
+    zIndex: FormControl<number>;
+    rotate: FormControl<number>;
+    gapX: FormControl<number>;
+    gapY: FormControl<number>;
+    offsetX: FormControl<number>;
+    offsetY: FormControl<number>;
+  }>;
   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();