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 中直接显示文本