Form表单

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

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

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

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

    表单标签 nz-form-label

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

    表单域 nz-form-control

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

    内联登录栏

    内联登录栏，常用在顶部导航栏中。

    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 nzErrorTip="Please input your username!">
    10.           <nz-input-group nzPrefixIcon="user">
    11.             <input formControlName="userName" nz-input placeholder="Username" />
    12.           </nz-input-group>
    13.         </nz-form-control>
    14.       </nz-form-item>
    15.       <nz-form-item>
    16.         <nz-form-control nzErrorTip="Please input your Password!">
    17.           <nz-input-group nzPrefixIcon="lock">
    18.             <input formControlName="password" nz-input type="password" placeholder="Password" />
    19.           </nz-input-group>
    20.         </nz-form-control>
    21.       </nz-form-item>
    22.       <nz-form-item>
    23.         <nz-form-control>
    24.           <button nz-button nzType="primary" [disabled]="!validateForm.valid">Log in</button>
    25.         </nz-form-control>
    26.       </nz-form-item>
    27.     </form>
    28.   `
    29. })
    30. export class NzDemoFormHorizontalLoginComponent implements OnInit {
    31.   validateForm!: FormGroup;
    33.   submitForm(): void {
    34.     for (const i in this.validateForm.controls) {
    35.       this.validateForm.controls[i].markAsDirty();
    36.       this.validateForm.controls[i].updateValueAndValidity();
    37.     }
    38.   }
    40.   constructor(private fb: FormBuilder) {}
    42.   ngOnInit(): void {
    43.     this.validateForm = this.fb.group({
    44.       userName: [null, [Validators.required]],
    45.       password: [null, [Validators.required]],
    46.       remember: [true]
    47.     });
    48.   }
    49. }

    Form表单 - 图4

    登录框

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

    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 nzErrorTip="Please input your username!">
    10.           <nz-input-group nzPrefixIcon="user">
    11.             <input type="text" nz-input formControlName="userName" placeholder="Username" />
    12.           </nz-input-group>
    13.         </nz-form-control>
    14.       </nz-form-item>
    15.       <nz-form-item>
    16.         <nz-form-control nzErrorTip="Please input your Password!">
    17.           <nz-input-group nzPrefixIcon="lock">
    18.             <input type="password" nz-input formControlName="password" placeholder="Password" />
    19.           </nz-input-group>
    20.         </nz-form-control>
    21.       </nz-form-item>
    22.       <div nz-row class="login-form-margin">
    23.         <div nz-col [nzSpan]="12">
    24.           <label nz-checkbox formControlName="remember">
    25.             <span>Remember me</span>
    26.           </label>
    27.         </div>
    28.         <div nz-col [nzSpan]="12">
    29.           <a class="login-form-forgot">Forgot password</a>
    30.         </div>
    31.       </div>
    32.       <button nz-button class="login-form-button login-form-margin" [nzType]="'primary'">Log in</button>
    33.       Or <a> register now! </a>
    34.     </form>
    35.   `,
    36.   styles: [
    37.     `
    38.       .login-form {
    39.         max-width: 300px;
    40.       }
    42.       .login-form-margin {
    43.         margin-bottom: 16px;
    44.       }
    46.       .login-form-forgot {
    47.         float: right;
    48.       }
    50.       .login-form-button {
    51.         width: 100%;
    52.       }
    53.     `
    54.   ]
    55. })
    56. export class NzDemoFormNormalLoginComponent 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.   constructor(private fb: FormBuilder) {}
    68.   ngOnInit(): void {
    69.     this.validateForm = this.fb.group({
    70.       userName: [null, [Validators.required]],
    71.       password: [null, [Validators.required]],
    72.       remember: [true]
    73.     });
    74.   }
    75. }

    注册新用户

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

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

    Form表单 - 图6

    高级搜索

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

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

    动态增减表单项

    动态增加、减少表单项。

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

    时间类控件

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

    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-date-picker nzMode="month" formControlName="monthPicker"></nz-date-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表单 - 图9

    响应式表单验证

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

    1. nzValidateStatus: 校验状态，默认自动从 nz-form-control 中的 NgControl 获得校验状态，也可以手动指定为特定的 NgControl。
    2. nzHasFeedback：用于给输入框添加反馈图标。

    3. nzSuccessTip``nzWarningTip``nzErrorTip``nzValidatingTip：设置不同状态校验文案。

      当同一种状态下存在多种提示情况时，nzSuccessTip``nzWarningTip``nzErrorTip``nzValidatingTip 均支持传入 TemplateRef<{ $implicit: FormControl } 类型，可以通过)导出 FormControl 后用于切换不同的提示信息。
      当 FormControl.status 为 INVALID 并且错误包含 {warning：true} 时，nz-form-control 显示警告状态。

    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(validateForm.value)">
    10.       <nz-form-item>
    11.         <nz-form-label [nzSpan]="7" nzRequired>Username</nz-form-label>
    12.         <nz-form-control [nzSpan]="12" nzHasFeedback nzValidatingTip="Validating..." [nzErrorTip]="userErrorTpl">
    13.           <input nz-input formControlName="userName" placeholder="async validate try to write JasonWood" />
    14.           <ng-template #userErrorTpl let-control>
    15.             <ng-container *ngIf="control.hasError('required')">
    16.               Please input your username!
    17.             </ng-container>
    18.             <ng-container *ngIf="control.hasError('duplicated')">
    19.               The username is redundant!
    20.             </ng-container>
    21.           </ng-template>
    22.         </nz-form-control>
    23.       </nz-form-item>
    24.       <nz-form-item>
    25.         <nz-form-label [nzSpan]="7" nzRequired>E-mail</nz-form-label>
    26.         <nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="emailErrorTpl">
    27.           <input nz-input formControlName="email" placeholder="email" type="email" />
    28.           <ng-template #emailErrorTpl let-control>
    29.             <ng-container *ngIf="control.hasError('email')">
    30.               The input is not valid E-mail!
    31.             </ng-container>
    32.             <ng-container *ngIf="control.hasError('required')">
    33.               Please input your E-mail!
    34.             </ng-container>
    35.           </ng-template>
    36.         </nz-form-control>
    37.       </nz-form-item>
    38.       <nz-form-item>
    39.         <nz-form-label [nzSpan]="7" nzRequired>Password</nz-form-label>
    40.         <nz-form-control [nzSpan]="12" nzHasFeedback nzErrorTip="Please input your password!">
    41.           <input nz-input type="password" formControlName="password" (ngModelChange)="validateConfirmPassword()" />
    42.         </nz-form-control>
    43.       </nz-form-item>
    44.       <nz-form-item>
    45.         <nz-form-label [nzSpan]="7" nzRequired>Confirm Password</nz-form-label>
    46.         <nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="passwordErrorTpl">
    47.           <input nz-input type="password" formControlName="confirm" placeholder="confirm your password" />
    48.           <ng-template #passwordErrorTpl let-control>
    49.             <ng-container *ngIf="control.hasError('required')">
    50.               Please confirm your password!
    51.             </ng-container>
    52.             <ng-container *ngIf="control.hasError('confirm')">
    53.               Password is inconsistent!
    54.             </ng-container>
    55.           </ng-template>
    56.         </nz-form-control>
    57.       </nz-form-item>
    58.       <nz-form-item>
    59.         <nz-form-label [nzSpan]="7" nzRequired>Comment</nz-form-label>
    60.         <nz-form-control [nzSpan]="12" nzErrorTip="Please write something here!">
    61.           <textarea formControlName="comment" nz-input rows="2" placeholder="write any thing"></textarea>
    62.         </nz-form-control>
    63.       </nz-form-item>
    64.       <nz-form-item>
    65.         <nz-form-control [nzOffset]="7" [nzSpan]="12">
    66.           <button nz-button nzType="primary" [disabled]="!validateForm.valid">Submit</button>
    67.           <button nz-button (click)="resetForm($event)">Reset</button>
    68.         </nz-form-control>
    69.       </nz-form-item>
    70.     </form>
    71.   `,
    73.   styles: [
    74.     `
    75.       [nz-form] {
    76.         max-width: 600px;
    77.       }
    79.       button {
    80.         margin-left: 8px;
    81.       }
    82.     `
    83.   ]
    84. })
    85. export class NzDemoFormValidateReactiveComponent {
    86.   validateForm: FormGroup;
    88.   submitForm(value: { userName: string; email: string; password: string; confirm: string; comment: string }): void {
    89.     for (const key in this.validateForm.controls) {
    90.       this.validateForm.controls[key].markAsDirty();
    91.       this.validateForm.controls[key].updateValueAndValidity();
    92.     }
    93.     console.log(value);
    94.   }
    96.   resetForm(e: MouseEvent): void {
    97.     e.preventDefault();
    98.     this.validateForm.reset();
    99.     for (const key in this.validateForm.controls) {
    100.       this.validateForm.controls[key].markAsPristine();
    101.       this.validateForm.controls[key].updateValueAndValidity();
    102.     }
    103.   }
    105.   validateConfirmPassword(): void {
    106.     setTimeout(() => this.validateForm.controls.confirm.updateValueAndValidity());
    107.   }
    109.   userNameAsyncValidator = (control: FormControl) =>
    110.     new Observable((observer: Observer<ValidationErrors | null>) => {
    111.       setTimeout(() => {
    112.         if (control.value === 'JasonWood') {
    113.           // you have to return `{error: true}` to mark it as an error event
    114.           observer.next({ error: true, duplicated: true });
    115.         } else {
    116.           observer.next(null);
    117.         }
    118.         observer.complete();
    119.       }, 1000);
    120.     });
    122.   confirmValidator = (control: FormControl): { [s: string]: boolean } => {
    123.     if (!control.value) {
    124.       return { error: true, required: true };
    125.     } else if (control.value !== this.validateForm.controls.password.value) {
    126.       return { confirm: true, error: true };
    127.     }
    128.     return {};
    129.   };
    131.   constructor(private fb: FormBuilder) {
    132.     this.validateForm = this.fb.group({
    133.       userName: ['', [Validators.required], [this.userNameAsyncValidator]],
    134.       email: ['', [Validators.email, Validators.required]],
    135.       password: ['', [Validators.required]],
    136.       confirm: ['', [this.confirmValidator]],
    137.       comment: ['', [Validators.required]]
    138.     });
    139.   }
    140. }

    模板驱动表单验证

    当使用模板驱动表单时，模板可以根据模板设定自动进行校验。

    1. nzHasFeedback：用于给输入框添加反馈图标。

    2. nzSuccessTip``nzWarningTip``nzErrorTip``nzValidatingTip：设置不同状态校验文案。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-form-validate-template',
    5.   template: `
    6.     <form nz-form>
    7.       <nz-form-item>
    8.         <nz-form-label [nzSpan]="5">Required</nz-form-label>
    9.         <nz-form-control nzHasFeedback [nzSpan]="12" nzErrorTip="Input is required">
    10.           <input nz-input [ngModel]="'Required Input'" name="required" required />
    11.         </nz-form-control>
    12.       </nz-form-item>
    13.       <nz-form-item>
    14.         <nz-form-label [nzSpan]="5">MaxLength</nz-form-label>
    15.         <nz-form-control nzHasFeedback [nzSpan]="12" nzErrorTip="MaxLength is 6">
    16.           <input nz-input [ngModel]="'MaxLength is 6'" name="maxlength" maxlength="6" />
    17.         </nz-form-control>
    18.       </nz-form-item>
    19.       <nz-form-item>
    20.         <nz-form-label [nzSpan]="5">MinLength</nz-form-label>
    21.         <nz-form-control nzHasFeedback [nzSpan]="12" nzErrorTip="MinLength is 6">
    22.           <input nz-input [ngModel]="'MinLength is 6'" name="minlength" minlength="6" />
    23.         </nz-form-control>
    24.       </nz-form-item>
    25.       <nz-form-item>
    26.         <nz-form-control nzHasFeedback [nzSpan]="12" nzErrorTip="Email is not valid">
    27.           <input nz-input [ngModel]="'Input Email'" name="email" email />
    28.         </nz-form-control>
    29.       </nz-form-item>
    30.       <nz-form-item>
    31.         <nz-form-label [nzSpan]="5">Pattern</nz-form-label>
    32.         <nz-form-control nzHasFeedback [nzSpan]="12" nzErrorTip="Pattern not match">
    33.           <input nz-input [ngModel]="'Match pattern'" name="pattern" pattern=".{3,}" />
    34.         </nz-form-control>
    35.       </nz-form-item>
    36.       <nz-form-item>
    37.         <nz-form-label [nzSpan]="5">Mix</nz-form-label>
    38.         <nz-form-control nzHasFeedback [nzSpan]="12" [nzErrorTip]="combineTpl">
    39.           <input nz-input [ngModel]="'MaxLength is 12 and MinLength is 6'" name="mix" minlength="6" maxlength="12" required />
    40.           <ng-template #combineTpl let-control>
    41.             <ng-container *ngIf="control.hasError('maxlength')">MaxLength is 12</ng-container>
    42.             <ng-container *ngIf="control.hasError('minlength')">MinLength is 6</ng-container>
    43.             <ng-container *ngIf="control.hasError('required')">Input is required</ng-container>
    44.           </ng-template>
    45.         </nz-form-control>
    46.       </nz-form-item>
    47.     </form>
    48.   `,
    49.   styles: [
    50.     `
    51.       [nz-form] {
    52.         max-width: 600px;
    53.       }
    54.     `
    55.   ]
    56. })
    57. export class NzDemoFormValidateTemplateComponent {}

    Form表单 - 图11

    自动提示

    让提示变得更简单。
    需要预先自定义 Validators 和提供 nzAutoTips，它们优先级如下：

    • Validators > nzAutoTips
    • 通过 @Input 设置 nzAutoTips
    • 通过全局配置设置 nzAutoTips

    另外，你可以使用 nzDisableAutoTips 去禁用它。

    手动指定表单状态

    用户可以在通过 nz-form-control 的 nzValidateStatus 属性直接设定表单的状态。

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

    表单联动

    使用 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" nzErrorTip="Please input your username!">
    11.           <input id="note" type="text" nz-input formControlName="note" />
    12.         </nz-form-control>
    13.       </nz-form-item>
    14.       <nz-form-item>
    15.         <nz-form-label [nzSpan]="5" nzFor="gender" nzRequired>Gender</nz-form-label>
    16.         <nz-form-control [nzSpan]="12" nzErrorTip="Please select your gender!">
    17.           <nz-select
    18.             id="gender"
    19.             formControlName="gender"
    20.             nzPlaceHolder="Select a option and change input text above"
    21.             (ngModelChange)="genderChange($event)"
    22.           >
    23.             <nz-option nzValue="male" nzLabel="male"></nz-option>
    24.             <nz-option nzValue="female" nzLabel="female"></nz-option>
    25.           </nz-select>
    26.         </nz-form-control>
    27.       </nz-form-item>
    28.       <nz-form-item>
    29.         <nz-form-control [nzSpan]="12" [nzOffset]="5">
    30.           <button nz-button nzType="primary">Submit</button>
    31.         </nz-form-control>
    32.       </nz-form-item>
    33.     </form>
    34.   `,
    35.   styles: [
    36.     `
    37.       [nz-form] {
    38.         max-width: 600px;
    39.       }
    40.     `
    41.   ]
    42. })
    43. export class NzDemoFormCoordinatedComponent 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.   genderChange(value: string): void {
    54.     this.validateForm.get('note')!.setValue(value === 'male' ? 'Hi, man!' : 'Hi, lady!');
    55.   }
    57.   constructor(private fb: FormBuilder) {}
    59.   ngOnInit(): void {
    60.     this.validateForm = this.fb.group({
    61.       note: [null, [Validators.required]],
    62.       gender: [null, [Validators.required]]
    63.     });
    64.   }
    65. }

    Form表单 - 图14

    表单布局

    表单有三种布局。

    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 nz-form [nzLayout]="validateForm.get('formLayout')?.value" [formGroup]="validateForm" (ngSubmit)="submitForm()">
    8.       <nz-form-item>
    9.         <nz-form-label [nzSpan]="isHorizontal ? 4 : null">Form Layout</nz-form-label>
    10.         <nz-form-control [nzSpan]="isHorizontal ? 14 : null">
    11.           <nz-radio-group formControlName="formLayout">
    12.             <label nz-radio-button [nzValue]="'horizontal'">Horizontal</label>
    13.             <label nz-radio-button [nzValue]="'vertical'">Vertical</label>
    14.             <label nz-radio-button [nzValue]="'inline'">Inline</label>
    15.           </nz-radio-group>
    16.         </nz-form-control>
    17.       </nz-form-item>
    18.       <nz-form-item>
    19.         <nz-form-label [nzSpan]="isHorizontal ? 4 : null">Field A</nz-form-label>
    20.         <nz-form-control [nzSpan]="isHorizontal ? 14 : null" nzErrorTip="Please input your username!">
    21.           <input nz-input formControlName="fieldA" placeholder="input placeholder" />
    22.         </nz-form-control>
    23.       </nz-form-item>
    24.       <nz-form-item>
    25.         <nz-form-label [nzSpan]="isHorizontal ? 4 : null">Field B</nz-form-label>
    26.         <nz-form-control [nzSpan]="isHorizontal ? 14 : null" nzErrorTip="Please input your Password!">
    27.           <input nz-input formControlName="filedB" placeholder="input placeholder" />
    28.         </nz-form-control>
    29.       </nz-form-item>
    30.       <nz-form-item>
    31.         <nz-form-control [nzSpan]="isHorizontal ? 14 : null" [nzOffset]="isHorizontal ? 4 : null">
    32.           <button nz-button nzType="primary">Submit</button>
    33.         </nz-form-control>
    34.       </nz-form-item>
    35.     </form>
    36.   `,
    37.   styles: [
    38.     `
    39.       [nz-form]:not(.ant-form-inline):not(.ant-form-vertical) {
    40.         max-width: 600px;
    41.       }
    42.     `
    43.   ]
    44. })
    45. export class NzDemoFormLayoutComponent implements OnInit {
    46.   validateForm!: FormGroup;
    48.   submitForm(): void {
    49.     for (const i in this.validateForm.controls) {
    50.       this.validateForm.controls[i].markAsDirty();
    51.       this.validateForm.controls[i].updateValueAndValidity();
    52.     }
    53.   }
    55.   get isHorizontal(): boolean {
    56.     return this.validateForm.controls.formLayout?.value === 'horizontal';
    57.   }
    59.   constructor(private fb: FormBuilder) {}
    61.   ngOnInit(): void {
    62.     this.validateForm = this.fb.group({
    63.       formLayout: ['horizontal'],
    64.       fieldA: [null, [Validators.required]],
    65.       filedB: [null, [Validators.required]]
    66.     });
    67.   }
    68. }

    动态校验规则

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

    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" nzErrorTip="Please input your name">
    11.           <input type="text" nz-input formControlName="name" placeholder="Please input your name" />
    12.         </nz-form-control>
    13.       </nz-form-item>
    14.       <nz-form-item>
    15.         <nz-form-label [nzSpan]="4" nzFor="nickname" [nzRequired]="validateForm.get('required')?.value">Nickname</nz-form-label>
    16.         <nz-form-control [nzSpan]="8" nzErrorTip="Please input your nickname">
    17.           <input type="text" nz-input formControlName="nickname" placeholder="Please input your nickname" />
    18.         </nz-form-control>
    19.       </nz-form-item>
    20.       <nz-form-item>
    21.         <nz-form-control [nzSpan]="8" [nzOffset]="4">
    22.           <label nz-checkbox formControlName="required" (ngModelChange)="requiredChange($event)">Nickname is required</label>
    23.         </nz-form-control>
    24.       </nz-form-item>
    25.       <nz-form-item>
    26.         <nz-form-control [nzSpan]="8" [nzOffset]="4">
    27.           <button nz-button nzType="primary">Check</button>
    28.         </nz-form-control>
    29.       </nz-form-item>
    30.     </form>
    31.   `
    32. })
    33. export class NzDemoFormDynamicRuleComponent implements OnInit {
    34.   validateForm!: FormGroup;
    36.   submitForm(): void {
    37.     for (const i in this.validateForm.controls) {
    38.       this.validateForm.controls[i].markAsDirty();
    39.       this.validateForm.controls[i].updateValueAndValidity();
    40.     }
    41.   }
    43.   requiredChange(required: boolean): void {
    44.     if (!required) {
    45.       this.validateForm.get('nickname')!.clearValidators();
    46.       this.validateForm.get('nickname')!.markAsPristine();
    47.     } else {
    48.       this.validateForm.get('nickname')!.setValidators(Validators.required);
    49.       this.validateForm.get('nickname')!.markAsDirty();
    50.     }
    51.     this.validateForm.get('nickname')!.updateValueAndValidity();
    52.   }
    54.   constructor(private fb: FormBuilder) {}
    56.   ngOnInit(): void {
    57.     this.validateForm = this.fb.group({
    58.       name: [null, [Validators.required]],
    59.       nickname: [null],
    60.       required: [false]
    61.     });
    62.   }
    63. }

    nz-form-itemcomponent

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

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

    nz-form-labelcomponent

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

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

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

    nz-form-splitcomponent

    用于显示分隔符 -

    nz-form-textcomponent