• Form表单
    • 表单
      • 表单项 nz-form-item
      • 表单标签 nz-form-label
      • 表单域 nz-form-control
    • 代码演示
    • API
      • 单独引入此组件
      • nz-formcomponent
      • nz-form-itemcomponent
      • nz-form-labelcomponent
      • nz-form-controlcomponent
      • nz-form-explaincomponent
      • nz-form-extracomponent
      • nz-form-splitcomponent
      • nz-form-textcomponent

    Form表单

    具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。

    该组件需要与 Angular表单 结合使用，开发者根据需要可以自由选择 响应式表单 或 模板驱动表单.

    使用该组件前请确保您已经阅读并掌握了 Forms 的使用方式。

    表单

    我们提供了以下三种排列方式：

    • 水平排列：标签和表单控件水平排列；（默认）
    • 垂直排列：标签和表单控件上下垂直排列；
    • 行内排列：表单项水平行内排列。

    表单项 nz-form-item

    表单项用于区分表单中不同的区域，包含表单域和表单标签(可选)。

    表单标签 nz-form-label

    用于标示当前表单项的内容，可选。

    表单域 nz-form-control

    表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。

    1. <form nz-form>
    2.   <nz-form-item>
    3.     <nz-form-label [nzSpan]="6" nzFor="email">E-mail</nz-form-label>
    4.     <nz-form-control [nzSpan]="14">
    5.       <input nz-input name="email" type="email" id="email">
    6.     </nz-form-control>
    7.   </nz-form-item >
    8. </form>

    代码演示

    Form表单 - 图1

    水平登录栏

    水平登录栏，常用在顶部导航栏中。

    1. import { Component, OnInit } from '@angular/core';
    2. import { FormBuilder, FormGroup, Validators } from '@angular/forms';
    4. @Component({
    5.   selector: 'nz-demo-form-horizontal-login',
    6.   template: `
    7.     <form nz-form [nzLayout]="'inline'" [formGroup]="validateForm" (ngSubmit)="submitForm()">
    8.       <nz-form-item>
    9.         <nz-form-control>
    10.           <nz-input-group [nzPrefix]="prefixUser">
    11.             <input formControlName="userName" nz-input placeholder="Username" />
    12.           </nz-input-group>
    13.           <nz-form-explain *ngIf="validateForm.get('userName')?.dirty && validateForm.get('userName')?.errors"
    14.             >Please input your username!</nz-form-explain
    15.           >
    16.         </nz-form-control>
    17.       </nz-form-item>
    18.       <nz-form-item>
    19.         <nz-form-control>
    20.           <nz-input-group [nzPrefix]="prefixLock">
    21.             <input formControlName="password" nz-input type="password" placeholder="Password" />
    22.           </nz-input-group>
    23.           <nz-form-explain *ngIf="validateForm.get('password')?.dirty && validateForm.get('password')?.errors"
    24.             >Please input your Password!</nz-form-explain
    25.           >
    26.         </nz-form-control>
    27.       </nz-form-item>
    28.       <nz-form-item>
    29.         <nz-form-control>
    30.           <button nz-button nzType="primary" [disabled]="!validateForm.valid">Log in</button>
    31.         </nz-form-control>
    32.       </nz-form-item>
    33.     </form>
    34.     <ng-template #prefixUser><i nz-icon type="user"></i></ng-template>
    35.     <ng-template #prefixLock><i nz-icon type="lock"></i></ng-template>
    36.   `
    37. })
    38. export class NzDemoFormHorizontalLoginComponent implements OnInit {
    39.   validateForm: FormGroup;
    41.   submitForm(): void {
    42.     for (const i in this.validateForm.controls) {
    43.       this.validateForm.controls[i].markAsDirty();
    44.       this.validateForm.controls[i].updateValueAndValidity();
    45.     }
    46.   }
    48.   constructor(private fb: FormBuilder) {}
    50.   ngOnInit(): void {
    51.     this.validateForm = this.fb.group({
    52.       userName: [null, [Validators.required]],
    53.       password: [null, [Validators.required]],
    54.       remember: [true]
    55.     });
    56.   }
    57. }

    Form表单 - 图2

    登录框

    普通的登录框，可以容纳更多的元素。

    1. import { Component, OnInit } from '@angular/core';
    2. import { FormBuilder, FormGroup, Validators } from '@angular/forms';
    4. @Component({
    5.   selector: 'nz-demo-form-normal-login',
    6.   template: `
    7.     <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
    8.       <nz-form-item>
    9.         <nz-form-control>
    10.           <nz-input-group [nzPrefix]="prefixUser">
    11.             <input type="text" nz-input formControlName="userName" placeholder="Username" />
    12.           </nz-input-group>
    13.           <nz-form-explain *ngIf="validateForm.get('userName')?.dirty && validateForm.get('userName')?.errors"
    14.             >Please input your username!</nz-form-explain
    15.           >
    16.         </nz-form-control>
    17.       </nz-form-item>
    18.       <nz-form-item>
    19.         <nz-form-control>
    20.           <nz-input-group [nzPrefix]="prefixLock">
    21.             <input type="password" nz-input formControlName="password" placeholder="Password" />
    22.           </nz-input-group>
    23.           <nz-form-explain *ngIf="validateForm.get('password')?.dirty && validateForm.get('password')?.errors"
    24.             >Please input your Password!</nz-form-explain
    25.           >
    26.         </nz-form-control>
    27.       </nz-form-item>
    28.       <nz-form-item>
    29.         <nz-form-control>
    30.           <label nz-checkbox formControlName="remember">
    31.             <span>Remember me</span>
    32.           </label>
    33.           <a class="login-form-forgot" class="login-form-forgot">Forgot password</a>
    34.           <button nz-button class="login-form-button" [nzType]="'primary'">Log in</button>
    35.           Or
    36.           <a href="">register now!</a>
    37.         </nz-form-control>
    38.       </nz-form-item>
    39.     </form>
    40.     <ng-template #prefixUser><i nz-icon type="user"></i></ng-template>
    41.     <ng-template #prefixLock><i nz-icon type="lock"></i></ng-template>
    42.   `,
    43.   styles: [
    44.     `
    45.       .login-form {
    46.         max-width: 300px;
    47.       }
    49.       .login-form-forgot {
    50.         float: right;
    51.       }
    53.       .login-form-button {
    54.         width: 100%;
    55.       }
    56.     `
    57.   ]
    58. })
    59. export class NzDemoFormNormalLoginComponent implements OnInit {
    60.   validateForm: FormGroup;
    62.   submitForm(): void {
    63.     for (const i in this.validateForm.controls) {
    64.       this.validateForm.controls[i].markAsDirty();
    65.       this.validateForm.controls[i].updateValueAndValidity();
    66.     }
    67.   }
    69.   constructor(private fb: FormBuilder) {}
    71.   ngOnInit(): void {
    72.     this.validateForm = this.fb.group({
    73.       userName: [null, [Validators.required]],
    74.       password: [null, [Validators.required]],
    75.       remember: [true]
    76.     });
    77.   }
    78. }

    Form表单 - 图3

    注册新用户

    用户填写必须的信息以注册新用户。

    1. import { Component, OnInit } from '@angular/core';
    2. import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
    4. @Component({
    5.   selector: 'nz-demo-form-register',
    6.   template: `
    7.     <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
    8.       <nz-form-item>
    9.         <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="email">E-mail</nz-form-label>
    10.         <nz-form-control [nzSm]="14" [nzXs]="24">
    11.           <input nz-input formControlName="email" id="email" />
    12.           <nz-form-explain *ngIf="validateForm.get('email')?.dirty && validateForm.get('email')?.errors">
    13.             The input is not valid E-mail!
    14.           </nz-form-explain>
    15.         </nz-form-control>
    16.       </nz-form-item>
    17.       <nz-form-item>
    18.         <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="password" nzRequired>Password</nz-form-label>
    19.         <nz-form-control [nzSm]="14" [nzXs]="24">
    20.           <input
    21.             nz-input
    22.             type="password"
    23.             id="password"
    24.             formControlName="password"
    25.             (ngModelChange)="updateConfirmValidator()"
    26.           />
    27.           <nz-form-explain *ngIf="validateForm.get('password')?.dirty && validateForm.get('password')?.errors"
    28.             >Please input your password!</nz-form-explain
    29.           >
    30.         </nz-form-control>
    31.       </nz-form-item>
    32.       <nz-form-item>
    33.         <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="checkPassword" nzRequired>Confirm Password</nz-form-label>
    34.         <nz-form-control [nzSm]="14" [nzXs]="24">
    35.           <input nz-input type="password" formControlName="checkPassword" id="checkPassword" />
    36.           <nz-form-explain
    37.             *ngIf="validateForm.get('checkPassword')?.dirty && validateForm.get('checkPassword')?.errors"
    38.           >
    39.             <ng-container *ngIf="validateForm.get('checkPassword')?.hasError('required')">
    40.               Please confirm your password!
    41.             </ng-container>
    42.             <ng-container *ngIf="validateForm.get('checkPassword')?.hasError('confirm')">
    43.               Two passwords that you enter is inconsistent!
    44.             </ng-container>
    45.           </nz-form-explain>
    46.         </nz-form-control>
    47.       </nz-form-item>
    48.       <nz-form-item>
    49.         <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="nickname" nzRequired>
    50.           <span>
    51.             Nickname
    52.             <i
    53.               nz-icon
    54.               nz-tooltip
    55.               nzTitle="What do you want other to call you"
    56.               type="question-circle"
    57.               theme="outline"
    58.             ></i>
    59.           </span>
    60.         </nz-form-label>
    61.         <nz-form-control [nzSm]="14" [nzXs]="24">
    62.           <input nz-input id="nickname" formControlName="nickname" />
    63.           <nz-form-explain *ngIf="validateForm.get('nickname')?.dirty && validateForm.get('nickname')?.errors"
    64.             >Please input your nickname!</nz-form-explain
    65.           >
    66.         </nz-form-control>
    67.       </nz-form-item>
    68.       <nz-form-item>
    69.         <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="phoneNumber" nzRequired>Phone Number</nz-form-label>
    70.         <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.controls['phoneNumber']">
    71.           <nz-input-group [nzAddOnBefore]="addOnBeforeTemplate">
    72.             <ng-template #addOnBeforeTemplate>
    73.               <nz-select formControlName="phoneNumberPrefix" style="width: 70px;">
    74.                 <nz-option nzLabel="+86" nzValue="+86"></nz-option>
    75.                 <nz-option nzLabel="+87" nzValue="+87"></nz-option>
    76.               </nz-select>
    77.             </ng-template>
    78.             <input formControlName="phoneNumber" id="'phoneNumber'" nz-input />
    79.           </nz-input-group>
    80.           <nz-form-explain *ngIf="validateForm.get('phoneNumber')?.dirty && validateForm.get('phoneNumber')?.errors"
    81.             >Please input your phone number!</nz-form-explain
    82.           >
    83.         </nz-form-control>
    84.       </nz-form-item>
    85.       <nz-form-item>
    86.         <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="website" nzRequired>Website</nz-form-label>
    87.         <nz-form-control [nzSm]="14" [nzXs]="24">
    88.           <input nz-input id="website" formControlName="website" placeholder="website" />
    89.           <nz-form-explain *ngIf="validateForm.get('website')?.dirty && validateForm.get('website')?.errors"
    90.             >Please input website!</nz-form-explain
    91.           >
    92.         </nz-form-control>
    93.       </nz-form-item>
    94.       <nz-form-item>
    95.         <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="captcha" nzRequired>Captcha</nz-form-label>
    96.         <nz-form-control [nzSm]="14" [nzXs]="24">
    97.           <div nz-row [nzGutter]="8">
    98.             <div nz-col [nzSpan]="12">
    99.               <input nz-input formControlName="captcha" id="captcha" />
    100.             </div>
    101.             <div nz-col [nzSpan]="12">
    102.               <button nz-button (click)="getCaptcha($event)">Get captcha</button>
    103.             </div>
    104.           </div>
    105.           <nz-form-explain *ngIf="validateForm.get('captcha')?.dirty && validateForm.get('captcha')?.errors"
    106.             >Please input the captcha you got!</nz-form-explain
    107.           >
    108.           <nz-form-extra>We must make sure that your are a human.</nz-form-extra>
    109.         </nz-form-control>
    110.       </nz-form-item>
    111.       <nz-form-item nz-row style="margin-bottom:8px;">
    112.         <nz-form-control [nzSpan]="14" [nzOffset]="6">
    113.           <label nz-checkbox formControlName="agree">
    114.             <span>I have read the <a>agreement</a></span>
    115.           </label>
    116.         </nz-form-control>
    117.       </nz-form-item>
    118.       <nz-form-item nz-row style="margin-bottom:8px;">
    119.         <nz-form-control [nzSpan]="14" [nzOffset]="6">
    120.           <button nz-button nzType="primary">Register</button>
    121.         </nz-form-control>
    122.       </nz-form-item>
    123.     </form>
    124.   `,
    126.   styles: [
    127.     `
    128.       [nz-form] {
    129.         max-width: 600px;
    130.       }
    131.     `
    132.   ]
    133. })
    134. export class NzDemoFormRegisterComponent implements OnInit {
    135.   validateForm: FormGroup;
    137.   submitForm(): void {
    138.     for (const i in this.validateForm.controls) {
    139.       this.validateForm.controls[i].markAsDirty();
    140.       this.validateForm.controls[i].updateValueAndValidity();
    141.     }
    142.   }
    144.   updateConfirmValidator(): void {
    145.     /** wait for refresh value */
    146.     Promise.resolve().then(() => this.validateForm.controls.checkPassword.updateValueAndValidity());
    147.   }
    149.   confirmationValidator = (control: FormControl): { [s: string]: boolean } => {
    150.     if (!control.value) {
    151.       return { required: true };
    152.     } else if (control.value !== this.validateForm.controls.password.value) {
    153.       return { confirm: true, error: true };
    154.     }
    155.     return {};
    156.   };
    158.   getCaptcha(e: MouseEvent): void {
    159.     e.preventDefault();
    160.   }
    162.   constructor(private fb: FormBuilder) {}
    164.   ngOnInit(): void {
    165.     this.validateForm = this.fb.group({
    166.       email: [null, [Validators.email, Validators.required]],
    167.       password: [null, [Validators.required]],
    168.       checkPassword: [null, [Validators.required, this.confirmationValidator]],
    169.       nickname: [null, [Validators.required]],
    170.       phoneNumberPrefix: ['+86'],
    171.       phoneNumber: [null, [Validators.required]],
    172.       website: [null, [Validators.required]],
    173.       captcha: [null, [Validators.required]],
    174.       agree: [false]
    175.     });
    176.   }
    177. }

    Form表单 - 图4

    高级搜索

    三列栅格式的表单排列方式，常用于数据表格的高级搜索。

    有部分定制的样式代码，由于输入标签长度不确定，需要根据具体情况自行调整。

    1. import { Component, OnInit } from '@angular/core';
    2. import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
    4. @Component({
    5.   selector: 'nz-demo-form-advanced-search',
    6.   template: `
    7.     <form nz-form [formGroup]="validateForm" class="ant-advanced-search-form">
    8.       <div nz-row [nzGutter]="24">
    9.         <div nz-col [nzSpan]="8" *ngFor="let control of controlArray" [style.display]="control.show ? 'block' : 'none'">
    10.           <nz-form-item nzFlex>
    11.             <nz-form-label [nzFor]="'field' + control.index">Field {{ control.index }}</nz-form-label>
    12.             <nz-form-control>
    13.               <input
    14.                 nz-input
    15.                 placeholder="placeholder"
    16.                 [formControlName]="'field' + control.index"
    17.                 [attr.id]="'field' + control.index"
    18.               />
    19.             </nz-form-control>
    20.           </nz-form-item>
    21.         </div>
    22.       </div>
    23.       <div nz-row>
    24.         <div nz-col [nzSpan]="24" style="text-align: right;">
    25.           <button nz-button [nzType]="'primary'">Search</button>
    26.           <button nz-button (click)="resetForm()">Clear</button>
    27.           <a style="margin-left:8px;font-size:12px;" (click)="toggleCollapse()">
    28.             Collapse
    29.             <i nz-icon [type]="isCollapse ? 'down' : 'up'"></i>
    30.           </a>
    31.         </div>
    32.       </div>
    33.     </form>
    34.     <div class="search-result-list">
    35.       Search Result List
    36.     </div>
    37.   `,
    39.   styles: [
    40.     `
    41.       .ant-advanced-search-form {
    42.         padding: 24px;
    43.         background: #fbfbfb;
    44.         border: 1px solid #d9d9d9;
    45.         border-radius: 6px;
    46.       }
    48.       .search-result-list {
    49.         margin-top: 16px;
    50.         border: 1px dashed #e9e9e9;
    51.         border-radius: 6px;
    52.         background-color: #fafafa;
    53.         min-height: 200px;
    54.         text-align: center;
    55.         padding-top: 80px;
    56.       }
    58.       [nz-form-label] {
    59.         overflow: visible;
    60.       }
    62.       button {
    63.         margin-left: 8px;
    64.       }
    65.     `
    66.   ]
    67. })
    68. export class NzDemoFormAdvancedSearchComponent implements OnInit {
    69.   validateForm: FormGroup;
    70.   controlArray: any[] = [];
    71.   isCollapse = true;
    73.   toggleCollapse(): void {
    74.     this.isCollapse = !this.isCollapse;
    75.     this.controlArray.forEach((c, index) => {
    76.       c.show = this.isCollapse ? index < 6 : true;
    77.     });
    78.   }
    80.   resetForm(): void {
    81.     this.validateForm.reset();
    82.   }
    84.   constructor(private fb: FormBuilder) {}
    86.   ngOnInit(): void {
    87.     this.validateForm = this.fb.group({});
    88.     for (let i = 0; i < 10; i++) {
    89.       this.controlArray.push({ index: i, show: i < 6 });
    90.       this.validateForm.addControl(`field${i}`, new FormControl());
    91.     }
    92.   }
    93. }

    Form表单 - 图5

    动态增减表单项

    动态增加、减少表单项。

    1. import { Component, OnInit } from '@angular/core';
    2. import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
    4. @Component({
    5.   selector: 'nz-demo-form-dynamic-form-item',
    6.   template: `
    7.     <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
    8.       <nz-form-item *ngFor="let control of controlArray; let i = index">
    9.         <nz-form-label [nzXs]="24" [nzSm]="4" *ngIf="i == 0" [nzFor]="control.controlInstance"
    10.           >Passengers</nz-form-label
    11.         >
    12.         <nz-form-control [nzXs]="24" [nzSm]="20" [nzOffset]="i == 0 ? 0 : 4">
    13.           <input
    14.             nz-input
    15.             style="width: 60%; margin-right:8px;"
    16.             placeholder="placeholder"
    17.             [attr.id]="control.id"
    18.             [formControlName]="control.controlInstance"
    19.           />
    20.           <i nz-icon type="minus-circle-o" class="dynamic-delete-button" (click)="removeField(control, $event)"></i>
    21.           <nz-form-explain
    22.             *ngIf="
    23.               getFormControl(control.controlInstance)?.dirty &&
    24.               getFormControl(control.controlInstance)?.hasError('required')
    25.             "
    26.           >
    27.             Please input passenger's name or delete this field.
    28.           </nz-form-explain>
    29.         </nz-form-control>
    30.       </nz-form-item>
    31.       <nz-form-item>
    32.         <nz-form-control [nzXs]="{ span: 24, offset: 0 }" [nzSm]="{ span: 20, offset: 4 }">
    33.           <button nz-button nzType="dashed" style="width:60%" (click)="addField($event)">
    34.             <i nz-icon type="plus"></i> Add field
    35.           </button>
    36.         </nz-form-control>
    37.       </nz-form-item>
    38.       <nz-form-item>
    39.         <nz-form-control [nzXs]="{ span: 24, offset: 0 }" [nzSm]="{ span: 20, offset: 4 }">
    40.           <button nz-button nzType="primary">Submit</button>
    41.         </nz-form-control>
    42.       </nz-form-item>
    43.     </form>
    44.   `,
    46.   styles: [
    47.     `
    48.       .dynamic-delete-button {
    49.         cursor: pointer;
    50.         position: relative;
    51.         top: 4px;
    52.         font-size: 24px;
    53.         color: #999;
    54.         transition: all 0.3s;
    55.       }
    57.       .dynamic-delete-button:hover {
    58.         color: #777;
    59.       }
    61.       [nz-form] {
    62.         max-width: 600px;
    63.       }
    64.     `
    65.   ]
    66. })
    67. export class NzDemoFormDynamicFormItemComponent implements OnInit {
    68.   validateForm: FormGroup;
    69.   controlArray: Array<{ id: number; controlInstance: string }> = [];
    71.   addField(e?: MouseEvent): void {
    72.     if (e) {
    73.       e.preventDefault();
    74.     }
    75.     const id = this.controlArray.length > 0 ? this.controlArray[this.controlArray.length - 1].id + 1 : 0;
    77.     const control = {
    78.       id,
    79.       controlInstance: `passenger${id}`
    80.     };
    81.     const index = this.controlArray.push(control);
    82.     console.log(this.controlArray[this.controlArray.length - 1]);
    83.     this.validateForm.addControl(
    84.       this.controlArray[index - 1].controlInstance,
    85.       new FormControl(null, Validators.required)
    86.     );
    87.   }
    89.   removeField(i: { id: number; controlInstance: string }, e: MouseEvent): void {
    90.     e.preventDefault();
    91.     if (this.controlArray.length > 1) {
    92.       const index = this.controlArray.indexOf(i);
    93.       this.controlArray.splice(index, 1);
    94.       console.log(this.controlArray);
    95.       this.validateForm.removeControl(i.controlInstance);
    96.     }
    97.   }
    99.   getFormControl(name: string): AbstractControl {
    100.     return this.validateForm.controls[name];
    101.   }
    103.   submitForm(): void {
    104.     for (const i in this.validateForm.controls) {
    105.       this.validateForm.controls[i].markAsDirty();
    106.       this.validateForm.controls[i].updateValueAndValidity();
    107.     }
    108.     console.log(this.validateForm.value);
    109.   }
    111.   constructor(private fb: FormBuilder) {}
    113.   ngOnInit(): void {
    114.     this.validateForm = this.fb.group({});
    115.     this.addField();
    116.   }
    117. }

    Form表单 - 图6

    时间类控件

    时间类组件的输入和输出类型均为 Date 类型，可以通过 date-fns 工具库进行进一步的处理。

    1. import { Component, OnInit } from '@angular/core';
    2. import { FormBuilder, FormGroup } from '@angular/forms';
    4. @Component({
    5.   selector: 'nz-demo-form-time-related-controls',
    6.   template: `
    7.     <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
    8.       <nz-form-item>
    9.         <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired>DatePicker</nz-form-label>
    10.         <nz-form-control [nzSm]="16" [nzXs]="24">
    11.           <nz-date-picker formControlName="datePicker"></nz-date-picker>
    12.         </nz-form-control>
    13.       </nz-form-item>
    14.       <nz-form-item>
    15.         <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired>DatePicker[ShowTime]</nz-form-label>
    16.         <nz-form-control [nzSm]="16" [nzXs]="24">
    17.           <nz-date-picker nzShowTime formControlName="datePickerTime"></nz-date-picker>
    18.         </nz-form-control>
    19.       </nz-form-item>
    20.       <nz-form-item>
    21.         <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired>MonthPicker</nz-form-label>
    22.         <nz-form-control [nzSm]="16" [nzXs]="24">
    23.           <nz-month-picker formControlName="monthPicker"></nz-month-picker>
    24.         </nz-form-control>
    25.       </nz-form-item>
    26.       <nz-form-item>
    27.         <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired>RangePicker</nz-form-label>
    28.         <nz-form-control [nzSm]="16" [nzXs]="24">
    29.           <nz-range-picker formControlName="rangePicker"></nz-range-picker>
    30.         </nz-form-control>
    31.       </nz-form-item>
    32.       <nz-form-item>
    33.         <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired>RangePicker[showTime]</nz-form-label>
    34.         <nz-form-control [nzSm]="16" [nzXs]="24">
    35.           <nz-range-picker nzShowTime formControlName="rangePickerTime"></nz-range-picker>
    36.         </nz-form-control>
    37.       </nz-form-item>
    38.       <nz-form-item>
    39.         <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired>TimePicker</nz-form-label>
    40.         <nz-form-control [nzSm]="16" [nzXs]="24">
    41.           <nz-time-picker formControlName="timePicker"></nz-time-picker>
    42.         </nz-form-control>
    43.       </nz-form-item>
    44.       <nz-form-item>
    45.         <nz-form-control [nzXs]="{ span: 24, offset: 0 }" [nzSm]="{ span: 16, offset: 8 }">
    46.           <button nz-button nzType="primary">Submit</button>
    47.         </nz-form-control>
    48.       </nz-form-item>
    49.     </form>
    50.   `,
    51.   styles: [
    52.     `
    53.       form {
    54.         max-width: 600px;
    55.       }
    56.     `
    57.   ]
    58. })
    59. export class NzDemoFormTimeRelatedControlsComponent implements OnInit {
    60.   validateForm: FormGroup;
    62.   submitForm(): void {
    63.     console.log(this.validateForm.value);
    64.   }
    66.   constructor(private fb: FormBuilder) {}
    68.   ngOnInit(): void {
    69.     this.validateForm = this.fb.group({
    70.       datePicker: [null],
    71.       datePickerTime: [null],
    72.       monthPicker: [null],
    73.       rangePicker: [[]],
    74.       rangePickerTime: [[]],
    75.       timePicker: [null]
    76.     });
    77.   }
    78. }

    Form表单 - 图7

    响应式表单验证

    我们在 nz-form-control 上 提供了 nzValidateStatusnzHasFeedback 等属性，当使用响应式表单时，可以自己定义校验的时机和内容。

    • nzValidateStatus: 校验状态，默认自动从 nz-form-control 中的 NgControl 获得校验状态，也可以手动指定为特定的 NgControl。
    • nzHasFeedback：用于给输入框添加反馈图标。
    • nz-form-explain：设置校验文案。
    1. import { Component } from '@angular/core';
    3. import { FormBuilder, FormControl, FormGroup, ValidationErrors, Validators } from '@angular/forms';
    4. import { Observable, Observer } from 'rxjs';
    6. @Component({
    7.   selector: 'nz-demo-form-validate-reactive',
    8.   template: `
    9.     <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm($event, validateForm.value)">
    10.       <nz-form-item>
    11.         <nz-form-label [nzSpan]="7" nzRequired>Username</nz-form-label>
    12.         <nz-form-control [nzSpan]="12" nzHasFeedback>
    13.           <input nz-input formControlName="userName" placeholder="async validate try to write JasonWood" />
    14.           <nz-form-explain
    15.             *ngIf="
    16.               (validateForm.get('userName')?.dirty && validateForm.get('userName')?.errors) ||
    17.               validateForm.get('userName')?.pending
    18.             "
    19.           >
    20.             <ng-container *ngIf="validateForm.get('userName')?.hasError('required')">
    21.               Please input your username!
    22.             </ng-container>
    23.             <ng-container *ngIf="validateForm.get('userName')?.hasError('duplicated')">
    24.               The username is redundant!
    25.             </ng-container>
    26.             <ng-container *ngIf="validateForm.get('userName')?.pending">
    27.               Validating...
    28.             </ng-container>
    29.           </nz-form-explain>
    30.         </nz-form-control>
    31.       </nz-form-item>
    32.       <nz-form-item>
    33.         <nz-form-label [nzSpan]="7" nzRequired>E-mail</nz-form-label>
    34.         <nz-form-control [nzSpan]="12" nzHasFeedback>
    35.           <input nz-input formControlName="email" placeholder="email" type="email" />
    36.           <nz-form-explain *ngIf="validateForm.get('email')?.dirty && validateForm.get('email')?.errors">
    37.             <ng-container *ngIf="validateForm.get('email')?.hasError('email')">
    38.               The input is not valid E-mail!
    39.             </ng-container>
    40.             <ng-container *ngIf="validateForm.get('email')?.hasError('required')">
    41.               Please input your E-mail!
    42.             </ng-container>
    43.           </nz-form-explain>
    44.         </nz-form-control>
    45.       </nz-form-item>
    46.       <nz-form-item>
    47.         <nz-form-label [nzSpan]="7" nzRequired>Password</nz-form-label>
    48.         <div>
    49.           <nz-form-control [nzSpan]="12" nzHasFeedback>
    50.             <input nz-input type="password" formControlName="password" (ngModelChange)="validateConfirmPassword()" />
    51.             <nz-form-explain
    52.               *ngIf="validateForm.get('password')?.dirty && validateForm.get('password')?.hasError('required')"
    53.               >Please input your password!</nz-form-explain
    54.             >
    55.           </nz-form-control>
    56.         </div>
    57.       </nz-form-item>
    58.       <nz-form-item>
    59.         <nz-form-label [nzSpan]="7" nzRequired>Confirm Password</nz-form-label>
    60.         <nz-form-control [nzSpan]="12" nzHasFeedback>
    61.           <input nz-input type="password" formControlName="confirm" placeholder="confirm your password" />
    62.           <nz-form-explain *ngIf="validateForm.get('confirm')?.dirty && validateForm.get('confirm')?.errors">
    63.             <ng-container *ngIf="validateForm.get('confirm')?.hasError('required')">
    64.               Please confirm your password!
    65.             </ng-container>
    66.             <ng-container *ngIf="validateForm.get('confirm')?.hasError('confirm')">
    67.               Password is inconsistent!
    68.             </ng-container>
    69.           </nz-form-explain>
    70.         </nz-form-control>
    71.       </nz-form-item>
    72.       <nz-form-item>
    73.         <nz-form-label [nzSpan]="7" nzRequired>Comment</nz-form-label>
    74.         <nz-form-control [nzSpan]="12">
    75.           <textarea formControlName="comment" nz-input rows="2" placeholder="write any thing"></textarea>
    76.           <nz-form-explain
    77.             *ngIf="validateForm.get('comment')?.dirty && validateForm.get('comment')?.hasError('required')"
    78.             >Please write something here!</nz-form-explain
    79.           >
    80.         </nz-form-control>
    81.       </nz-form-item>
    82.       <nz-form-item>
    83.         <nz-form-control [nzOffset]="7" [nzSpan]="12">
    84.           <button nz-button nzType="primary" [disabled]="!validateForm.valid">Submit</button>
    85.           <button nz-button (click)="resetForm($event)">Reset</button>
    86.         </nz-form-control>
    87.       </nz-form-item>
    88.     </form>
    89.   `,
    91.   styles: [
    92.     `
    93.       [nz-form] {
    94.         max-width: 600px;
    95.       }
    97.       button {
    98.         margin-left: 8px;
    99.       }
    100.     `
    101.   ]
    102. })
    103. export class NzDemoFormValidateReactiveComponent {
    104.   validateForm: FormGroup;
    105.   submitForm = ($event: any, value: any) => {
    106.     $event.preventDefault();
    107.     for (const key in this.validateForm.controls) {
    108.       this.validateForm.controls[key].markAsDirty();
    109.       this.validateForm.controls[key].updateValueAndValidity();
    110.     }
    111.     console.log(value);
    112.   };
    114.   resetForm(e: MouseEvent): void {
    115.     e.preventDefault();
    116.     this.validateForm.reset();
    117.     for (const key in this.validateForm.controls) {
    118.       this.validateForm.controls[key].markAsPristine();
    119.       this.validateForm.controls[key].updateValueAndValidity();
    120.     }
    121.   }
    123.   validateConfirmPassword(): void {
    124.     setTimeout(() => this.validateForm.controls.confirm.updateValueAndValidity());
    125.   }
    127.   userNameAsyncValidator = (control: FormControl) =>
    128.     new Observable((observer: Observer<ValidationErrors | null>) => {
    129.       setTimeout(() => {
    130.         if (control.value === 'JasonWood') {
    131.           observer.next({ error: true, duplicated: true });
    132.         } else {
    133.           observer.next(null);
    134.         }
    135.         observer.complete();
    136.       }, 1000);
    137.     });
    139.   confirmValidator = (control: FormControl): { [s: string]: boolean } => {
    140.     if (!control.value) {
    141.       return { required: true };
    142.     } else if (control.value !== this.validateForm.controls.password.value) {
    143.       return { confirm: true, error: true };
    144.     }
    145.     return {};
    146.   };
    148.   constructor(private fb: FormBuilder) {
    149.     this.validateForm = this.fb.group({
    150.       userName: ['', [Validators.required], [this.userNameAsyncValidator]],
    151.       email: ['', [Validators.email, Validators.required]],
    152.       password: ['', [Validators.required]],
    153.       confirm: ['', [this.confirmValidator]],
    154.       comment: ['', [Validators.required]]
    155.     });
    156.   }
    157. }

    Form表单 - 图8

    模板驱动表单验证

    我们在 nz-form-control 上 提供了 nzValidateStatusnzHasFeedback 等属性，当使用模板驱动表单时，可以自己定义校验的时机和内容。

    • nzValidateStatus: 校验状态，可选 'success', 'warning', 'error', 'validating'。
    • nzHasFeedback：用于给输入框添加反馈图标。
    • nz-form-explain：设置校验文案。
    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-form-validate-static',
    5.   template: `
    6.     <form nz-form>
    7.       <nz-form-item>
    8.         <nz-form-label [nzSpan]="5">Fail</nz-form-label>
    9.         <nz-form-control nzValidateStatus="error" [nzSpan]="12">
    10.           <input nz-input [ngModel]="'unavailable choice'" name="errorValid" />
    11.           <nz-form-explain>Should be combination of numbers & alphabets</nz-form-explain>
    12.         </nz-form-control>
    13.       </nz-form-item>
    14.       <nz-form-item>
    15.         <nz-form-label [nzSpan]="5">Warning</nz-form-label>
    16.         <nz-form-control nzValidateStatus="warning" [nzSpan]="12">
    17.           <input nz-input [ngModel]="'Warning'" name="warningValid" />
    18.         </nz-form-control>
    19.       </nz-form-item>
    20.       <nz-form-item>
    21.         <nz-form-label [nzSpan]="5">Validating</nz-form-label>
    22.         <nz-form-control [nzSpan]="12" nzValidateStatus="validating" nzHasFeedback>
    23.           <input nz-input [ngModel]="'The content is being validated'" name="validating" />
    24.           <nz-form-explain>I'm validating the content</nz-form-explain>
    25.         </nz-form-control>
    26.       </nz-form-item>
    27.       <nz-form-item>
    28.         <nz-form-label [nzSpan]="5">Success</nz-form-label>
    29.         <nz-form-control [nzSpan]="12" nzValidateStatus="success" nzHasFeedback>
    30.           <input nz-input [ngModel]="'The content'" name="successValid" />
    31.         </nz-form-control>
    32.       </nz-form-item>
    33.       <nz-form-item>
    34.         <nz-form-label [nzSpan]="5">Warning</nz-form-label>
    35.         <nz-form-control [nzSpan]="12" nzValidateStatus="warning" nzHasFeedback>
    36.           <input nz-input [ngModel]="'Warning'" name="warningHighValid" />
    37.           <nz-form-explain>Should be combination of numbers & alphabets</nz-form-explain>
    38.         </nz-form-control>
    39.       </nz-form-item>
    40.       <nz-form-item>
    41.         <nz-form-label [nzSpan]="5">Fail</nz-form-label>
    42.         <nz-form-control [nzSpan]="12" nzValidateStatus="error" nzHasFeedback>
    43.           <input nz-input [ngModel]="'unavailable choice'" name="invalidValid" />
    44.           <nz-form-explain>Should be combination of numbers & alphabets</nz-form-explain>
    45.         </nz-form-control>
    46.       </nz-form-item>
    47.       <nz-form-item>
    48.         <nz-form-label [nzSpan]="5">Success</nz-form-label>
    49.         <nz-form-control [nzSpan]="12" nzValidateStatus="success" nzHasFeedback>
    50.           <nz-date-picker name="date-picker-success" style="width: 100%"></nz-date-picker>
    51.         </nz-form-control>
    52.       </nz-form-item>
    53.       <nz-form-item>
    54.         <nz-form-label [nzSpan]="5">Warning</nz-form-label>
    55.         <nz-form-control [nzSpan]="12" nzValidateStatus="warning" nzHasFeedback>
    56.           <nz-time-picker name="time-picker-warning" style="width: 100%"></nz-time-picker>
    57.         </nz-form-control>
    58.       </nz-form-item>
    59.       <nz-form-item>
    60.         <nz-form-label [nzSpan]="5">Error</nz-form-label>
    61.         <nz-form-control [nzSpan]="12" nzValidateStatus="error" nzHasFeedback>
    62.           <nz-select name="select-error" [ngModel]="'Option 1'">
    63.             <nz-option nzValue="Option 1" nzLabel="Option 1"></nz-option>
    64.             <nz-option nzValue="Option 2" nzLabel="Option 2"></nz-option>
    65.           </nz-select>
    66.         </nz-form-control>
    67.       </nz-form-item>
    68.       <nz-form-item>
    69.         <nz-form-label [nzSpan]="5">Validating</nz-form-label>
    70.         <nz-form-control [nzSpan]="12" nzValidateStatus="validating" nzHasFeedback>
    71.           <nz-select name="select-validate" [ngModel]="'Option 2'">
    72.             <nz-option nzValue="Option 1" nzLabel="Option 1"></nz-option>
    73.             <nz-option nzValue="Option 2" nzLabel="Option 2"></nz-option>
    74.           </nz-select>
    75.         </nz-form-control>
    76.       </nz-form-item>
    77.       <nz-form-item>
    78.         <nz-form-label [nzSpan]="5">Success</nz-form-label>
    79.         <nz-form-control [nzSpan]="12" nzValidateStatus="success" nzHasFeedback>
    80.           <nz-input-number name="inputnumber-success" style="width:100%"></nz-input-number>
    81.         </nz-form-control>
    82.       </nz-form-item>
    83.     </form>
    84.   `,
    85.   styles: [
    86.     `
    87.       [nz-form] {
    88.         max-width: 600px;
    89.       }
    90.       nz-date-picker ::ng-deep .ant-calendar-picker {
    91.         width: 100%;
    92.       }
    93.     `
    94.   ]
    95. })
    96. export class NzDemoFormValidateStaticComponent {}

    Form表单 - 图9

    表单联动

    使用 setValue 来动态设置其他控件的值。

    1. import { Component, OnInit } from '@angular/core';
    2. import { FormBuilder, FormGroup, Validators } from '@angular/forms';
    4. @Component({
    5.   selector: 'nz-demo-form-coordinated',
    6.   template: `
    7.     <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
    8.       <nz-form-item>
    9.         <nz-form-label [nzSpan]="5" nzRequired nzFor="note">Note</nz-form-label>
    10.         <nz-form-control [nzSpan]="12">
    11.           <input id="note" type="text" nz-input formControlName="note" />
    12.           <nz-form-explain *ngIf="validateForm.get('note')?.dirty && validateForm.get('note')?.errors"
    13.             >Please input your username!</nz-form-explain
    14.           >
    15.         </nz-form-control>
    16.       </nz-form-item>
    17.       <nz-form-item>
    18.         <nz-form-label [nzSpan]="5" nzFor="gender" nzRequired>Gender</nz-form-label>
    19.         <nz-form-control [nzSpan]="12">
    20.           <nz-select
    21.             id="gender"
    22.             formControlName="gender"
    23.             nzPlaceHolder="Select a option and change input text above"
    24.             (ngModelChange)="genderChange($event)"
    25.           >
    26.             <nz-option nzValue="male" nzLabel="male"></nz-option>
    27.             <nz-option nzValue="female" nzLabel="female"></nz-option>
    28.           </nz-select>
    29.           <nz-form-explain *ngIf="validateForm.get('gender')?.dirty && validateForm.get('gender')?.errors"
    30.             >Please select your gender!</nz-form-explain
    31.           >
    32.         </nz-form-control>
    33.       </nz-form-item>
    34.       <nz-form-item>
    35.         <nz-form-control [nzSpan]="12" [nzOffset]="5">
    36.           <button nz-button nzType="primary">Submit</button>
    37.         </nz-form-control>
    38.       </nz-form-item>
    39.     </form>
    40.   `,
    41.   styles: [
    42.     `
    43.       [nz-form] {
    44.         max-width: 600px;
    45.       }
    46.     `
    47.   ]
    48. })
    49. export class NzDemoFormCoordinatedComponent implements OnInit {
    50.   validateForm: FormGroup;
    52.   submitForm(): void {
    53.     for (const i in this.validateForm.controls) {
    54.       this.validateForm.controls[i].markAsDirty();
    55.       this.validateForm.controls[i].updateValueAndValidity();
    56.     }
    57.   }
    59.   genderChange(value: string): void {
    60.     this.validateForm.get('note')!.setValue(value === 'male' ? 'Hi, man!' : 'Hi, lady!');
    61.   }
    63.   constructor(private fb: FormBuilder) {}
    65.   ngOnInit(): void {
    66.     this.validateForm = this.fb.group({
    67.       note: [null, [Validators.required]],
    68.       gender: [null, [Validators.required]]
    69.     });
    70.   }
    71. }

    Form表单 - 图10

    表单布局

    表单有三种布局。

    1. import { Component, OnInit } from '@angular/core';
    2. import { FormBuilder, FormGroup, Validators } from '@angular/forms';
    4. @Component({
    5.   selector: 'nz-demo-form-layout',
    6.   template: `
    7.     <form
    8.       nz-form
    9.       [nzLayout]="validateForm.get('formLayout')?.value"
    10.       [formGroup]="validateForm"
    11.       (ngSubmit)="submitForm()"
    12.     >
    13.       <nz-form-item>
    14.         <nz-form-label [nzSpan]="isHorizontal ? 4 : null">Form Layout</nz-form-label>
    15.         <nz-form-control [nzSpan]="isHorizontal ? 14 : null">
    16.           <nz-radio-group formControlName="formLayout">
    17.             <label nz-radio-button [nzValue]="'horizontal'">Horizontal</label>
    18.             <label nz-radio-button [nzValue]="'vertical'">Vertical</label>
    19.             <label nz-radio-button [nzValue]="'inline'">Inline</label>
    20.           </nz-radio-group>
    21.         </nz-form-control>
    22.       </nz-form-item>
    23.       <nz-form-item>
    24.         <nz-form-label [nzSpan]="isHorizontal ? 4 : null">Field A</nz-form-label>
    25.         <nz-form-control [nzSpan]="isHorizontal ? 14 : null">
    26.           <input nz-input formControlName="fieldA" placeholder="input placeholder" />
    27.           <nz-form-explain *ngIf="validateForm.get('fieldA')?.dirty && validateForm.get('fieldA')?.errors"
    28.             >Please input your username!</nz-form-explain
    29.           >
    30.         </nz-form-control>
    31.       </nz-form-item>
    32.       <nz-form-item>
    33.         <nz-form-label [nzSpan]="isHorizontal ? 4 : null">Field B</nz-form-label>
    34.         <nz-form-control [nzSpan]="isHorizontal ? 14 : null">
    35.           <input nz-input formControlName="filedB" placeholder="input placeholder" />
    36.           <nz-form-explain *ngIf="validateForm.get('filedB')?.dirty && validateForm.get('filedB')?.errors"
    37.             >Please input your Password!</nz-form-explain
    38.           >
    39.         </nz-form-control>
    40.       </nz-form-item>
    41.       <nz-form-item>
    42.         <nz-form-control [nzSpan]="isHorizontal ? 14 : null" [nzOffset]="isHorizontal ? 4 : null">
    43.           <button nz-button nzType="primary">Submit</button>
    44.         </nz-form-control>
    45.       </nz-form-item>
    46.     </form>
    47.   `,
    48.   styles: [
    49.     `
    50.       [nz-form]:not(.ant-form-inline):not(.ant-form-vertical) {
    51.         max-width: 600px;
    52.       }
    53.     `
    54.   ]
    55. })
    56. export class NzDemoFormLayoutComponent implements OnInit {
    57.   validateForm: FormGroup;
    59.   submitForm(): void {
    60.     for (const i in this.validateForm.controls) {
    61.       this.validateForm.controls[i].markAsDirty();
    62.       this.validateForm.controls[i].updateValueAndValidity();
    63.     }
    64.   }
    66.   get isHorizontal(): boolean {
    67.     return this.validateForm.controls.formLayout && this.validateForm.controls.formLayout.value === 'horizontal';
    68.   }
    70.   constructor(private fb: FormBuilder) {}
    72.   ngOnInit(): void {
    73.     this.validateForm = this.fb.group({
    74.       formLayout: ['horizontal'],
    75.       fieldA: [null, [Validators.required]],
    76.       filedB: [null, [Validators.required]]
    77.     });
    78.   }
    79. }

    Form表单 - 图11

    动态校验规则

    根据不同情况执行不同的校验规则。

    1. import { Component, OnInit } from '@angular/core';
    2. import { FormBuilder, FormGroup, Validators } from '@angular/forms';
    4. @Component({
    5.   selector: 'nz-demo-form-dynamic-rule',
    6.   template: `
    7.     <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
    8.       <nz-form-item>
    9.         <nz-form-label [nzSpan]="4" nzRequired nzFor="name">Name</nz-form-label>
    10.         <nz-form-control [nzSpan]="8">
    11.           <input type="text" nz-input formControlName="name" placeholder="Please input your name" />
    12.           <nz-form-explain *ngIf="validateForm.get('name')?.dirty && validateForm.get('name')?.errors"
    13.             >Please input your name</nz-form-explain
    14.           >
    15.         </nz-form-control>
    16.       </nz-form-item>
    17.       <nz-form-item>
    18.         <nz-form-label [nzSpan]="4" nzFor="nickname" [nzRequired]="validateForm.get('required')?.value"
    19.           >Nickname</nz-form-label
    20.         >
    21.         <nz-form-control [nzSpan]="8">
    22.           <input type="text" nz-input formControlName="nickname" placeholder="Please input your nickname" />
    23.           <nz-form-explain *ngIf="validateForm.get('nickname')?.dirty && validateForm.get('nickname')?.errors"
    24.             >Please input your nickname</nz-form-explain
    25.           >
    26.         </nz-form-control>
    27.       </nz-form-item>
    28.       <nz-form-item>
    29.         <nz-form-control [nzSpan]="8" [nzOffset]="4">
    30.           <label nz-checkbox formControlName="required" (ngModelChange)="requiredChange($event)"
    31.             >Nickname is required</label
    32.           >
    33.         </nz-form-control>
    34.       </nz-form-item>
    35.       <nz-form-item>
    36.         <nz-form-control [nzSpan]="8" [nzOffset]="4">
    37.           <button nz-button nzType="primary">Check</button>
    38.         </nz-form-control>
    39.       </nz-form-item>
    40.     </form>
    41.   `
    42. })
    43. export class NzDemoFormDynamicRuleComponent implements OnInit {
    44.   validateForm: FormGroup;
    46.   submitForm(): void {
    47.     for (const i in this.validateForm.controls) {
    48.       this.validateForm.controls[i].markAsDirty();
    49.       this.validateForm.controls[i].updateValueAndValidity();
    50.     }
    51.   }
    53.   requiredChange(required: boolean): void {
    54.     if (!required) {
    55.       this.validateForm.get('nickname')!.clearValidators();
    56.       this.validateForm.get('nickname')!.markAsPristine();
    57.     } else {
    58.       this.validateForm.get('nickname')!.setValidators(Validators.required);
    59.       this.validateForm.get('nickname')!.markAsDirty();
    60.     }
    61.     this.validateForm.get('nickname')!.updateValueAndValidity();
    62.   }
    64.   constructor(private fb: FormBuilder) {}
    66.   ngOnInit(): void {
    67.     this.validateForm = this.fb.group({
    68.       name: [null, [Validators.required]],
    69.       nickname: [null],
    70.       required: [false]
    71.     });
    72.   }
    73. }

    API

    单独引入此组件

    想要了解更多关于单独引入组件的内容，可以在快速上手页面进行查看。

    1. import { NzFormModule } from 'ng-zorro-antd';

    nz-formcomponent

    参数说明类型默认值
    [nzLayout]表单布局'horizontal'｜'vertical'｜'inline''horizontal'
    [nzNoColon]配置 nz-form-label 的 [nzNoColon] 的默认值booleanfalse

    nz-form-itemcomponent

    表单项用于区分表单中不同的区域，包含表单域和表单标签(可选)。

    所有 nz-row 的参数在 nz-form-item 上均可直接使用。

    参数说明类型默认值
    [nzFlex]是否Flex布局booleanfalse

    nz-form-labelcomponent

    用于标示当前表单项的内容，可选。

    所有 nz-col 的参数在 nz-form-label 上均可直接使用。

    参数说明类型默认值
    [nzRequired]当前项是否为必填，仅影响样式booleanfalse
    [nzNoColon]是否不显示 label 后面的冒号booleanfalse
    [nzFor]label 标签的 for 属性string-
    [nzColon]配合 label 属性使用，表示是否显示 label 后面的冒号booleantrue

    nz-form-controlcomponent

    注意：由于 Angular Form 目前提供的状态变更订阅不完整。手动更改表单状态时，例如 markAsDirty 后，需要执行 updateValueAndValidity 通知 nz-form-control 进行状态变更。

    表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。

    所有 nz-col 的参数在 nz-form-control 上均可直接使用。

    参数说明类型默认值
    [nzValidateStatus]Reactive Forms：会根据 FormControl 的状态自动生成校验状态FormControlnz-form-control 中包裹的第一个 FormControl
    [nzValidateStatus]Template-driven Forms：校验状态'success'｜'warning'｜'error'｜'validating'-
    [nzHasFeedback]配合 nzValidateStatus 属性使用，展示校验状态图标booleanfalse

    从 7.3.0 版本开始，nz-form-control 提供了 status 变量用于指示校验状态，status 会自动根据 [nzValidateStatus] 在 'success'｜'warning'｜'error'｜'validating' 中自动切换，用户可以通过模板变量导出 status 用于切换提示信息。

    nz-form-explaincomponent

    用于显示提示信息，会自动根据当前的 nzValidateStatus 显示不同的颜色

    注意：每个 nz-form-item 下最多只能有一个 nz-form-explain 。

    nz-form-extracomponent

    用于显示表单额外提示信息

    nz-form-splitcomponent

    用于显示分隔符 -

    nz-form-textcomponent

    在 nz-form-control 中直接显示文本