feat(module:form): support default nzValidateStatus & support more er…

…ror status (#696) close #693 close #692
NG-ZORRO · Dec 8, 2017 · 3d4213f · 3d4213f
1 parent b5e9aee
commit 3d4213f
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 40 deletions.
diff --git a/src/components/form/nz-form-control.component.ts b/src/components/form/nz-form-control.component.ts
@@ -1,4 +1,5 @@
-import { Component, HostBinding, Input } from '@angular/core';
+import { Component, ContentChild, Input } from '@angular/core';
+import { NgControl } from '@angular/forms';
 import { toBoolean } from '../util/convert';
 
 @Component({
@@ -14,12 +15,14 @@ import { toBoolean } from '../util/convert';
     </div>
   `,
   styles  : [],
-  host: {
+  host    : {
     '[class.ant-form-item-control-wrapper]': 'true'
   }
 })
 export class NzFormControlComponent {
   private _hasFeedback = false;
+  private _validateStatus: string | NgControl;
+  @ContentChild(NgControl) ngControl: NgControl;
 
   @Input()
   set nzHasFeedback(value: boolean) {
@@ -30,34 +33,32 @@ export class NzFormControlComponent {
     return this._hasFeedback;
   }
 
-  @Input() nzValidateStatus;
+  @Input()
+  set nzValidateStatus(value: string | NgControl) {
+    this._validateStatus = value;
+  }
+
+  get nzValidateStatus(): string | NgControl {
+    return this._validateStatus || this.ngControl;
+  }
 
   get isWarning(): boolean {
-    return this._isDirtyAndError('warning');
+    return this.nzValidateStatus === 'warning' || this.nzValidateStatus && (this.nzValidateStatus as NgControl).dirty && (this.nzValidateStatus as NgControl).hasError && (this.nzValidateStatus as NgControl).hasError('warning');
   }
 
   get isValidate(): boolean {
-    return this._isDirtyAndError('validating') || this.nzValidateStatus === 'pending' || this.nzValidateStatus && this.nzValidateStatus.dirty && this.nzValidateStatus.pending;
+    return this.nzValidateStatus === 'validating' || this.nzValidateStatus === 'pending' || this.nzValidateStatus && (this.nzValidateStatus as NgControl).dirty && (this.nzValidateStatus as NgControl).pending;
   }
 
   get isError(): boolean {
-    return this._isDirtyAndError('error')
-      || this._isDirtyAndError('required')
-      || this._isDirtyAndError('pattern')
-      || this._isDirtyAndError('email')
-      || this._isDirtyAndError('maxlength')
-      || this._isDirtyAndError('minlength');
+    return this.nzValidateStatus === 'error' || this.nzValidateStatus && (this.nzValidateStatus as NgControl).dirty && (this.nzValidateStatus as NgControl).errors && (this.nzValidateStatus as NgControl).hasError && !(this.nzValidateStatus as NgControl).hasError('warning');
   }
 
   get isSuccess(): boolean {
-    return this.nzValidateStatus === 'success' || this.nzValidateStatus && this.nzValidateStatus.dirty && this.nzValidateStatus.valid;
+    return this.nzValidateStatus === 'success' || this.nzValidateStatus && (this.nzValidateStatus as NgControl).dirty && (this.nzValidateStatus as NgControl).valid;
   }
 
   get hasFeedBack(): boolean {
     return this.nzHasFeedback;
   }
-
-  _isDirtyAndError(name: string): boolean {
-    return this.nzValidateStatus === name || this.nzValidateStatus && this.nzValidateStatus.dirty && this.nzValidateStatus.hasError && this.nzValidateStatus.hasError(name);
-  }
 }
diff --git a/src/showcase/nz-demo-form/nz-demo-form-dynamic.component.ts b/src/showcase/nz-demo-form/nz-demo-form-dynamic.component.ts
@@ -14,7 +14,7 @@ import {
       <div nz-form-label nz-col [nzSpan]="4" *ngIf="i==0">
         <label [attr.for]="control.controlInstance">Passengers</label>
       </div>
-      <div nz-form-control nz-col [nzSpan]="20" [nzOffset]="i==0?0:4" [nzValidateStatus]="getFormControl(control.controlInstance)">
+      <div nz-form-control nz-col [nzSpan]="20" [nzOffset]="i==0?0:4">
         <nz-input
           style="width: 60%; margin-right:8px;"
           [nzSize]="'large'"

diff --git a/src/showcase/nz-demo-form/nz-demo-form-horizontal.component.ts b/src/showcase/nz-demo-form/nz-demo-form-horizontal.component.ts
@@ -14,7 +14,7 @@ import {
         <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
           <label for="email" nz-form-item-required>E-mail</label>
         </div>
-        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('email')">
+        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
           <nz-input [nzSize]="'large'" formControlName="email" [nzId]="'email'"></nz-input>
           <div nz-form-explain *ngIf="getFormControl('email').dirty&&getFormControl('email').hasError('email')">The input is not valid E-mail!</div>
         </div>
@@ -23,7 +23,7 @@ import {
         <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
           <label for="password" nz-form-item-required>Password</label>
         </div>
-        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('password')">
+        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
           <nz-input [nzSize]="'large'" formControlName="password" [nzType]="'password'" [nzId]="'password'" (ngModelChange)="updateConfirmValidator()"></nz-input>
           <div nz-form-explain *ngIf="getFormControl('password').dirty&&getFormControl('password').hasError('required')">Please input your password!</div>
         </div>
@@ -32,7 +32,7 @@ import {
         <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
           <label for="checkPassword" nz-form-item-required>Confirm Password</label>
         </div>
-        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('checkPassword')">
+        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
           <nz-input [nzSize]="'large'" formControlName="checkPassword" [nzType]="'password'" [nzId]="'checkPassword'"></nz-input>
           <div nz-form-explain *ngIf="getFormControl('checkPassword').dirty&&getFormControl('checkPassword').hasError('required')">Please confirm your password!</div>
           <div nz-form-explain *ngIf="getFormControl('checkPassword').dirty&&getFormControl('checkPassword').hasError('confirm')">Two passwords that you enter is inconsistent!</div>
@@ -49,7 +49,7 @@ import {
             </span>
           </label>
         </div>
-        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('nickname')">
+        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
           <nz-input [nzSize]="'large'" formControlName="nickname" [nzId]="'nickname'"></nz-input>
           <div nz-form-explain *ngIf="getFormControl('nickname').dirty&&getFormControl('nickname').hasError('required')">Please input your nickname!</div>
         </div>
@@ -58,7 +58,7 @@ import {
         <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
           <label for="phoneNumber" nz-form-item-required>Phone Number</label>
         </div>
-        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('phoneNumber')">
+        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="validateForm.controls['phoneNumber']">
           <nz-input-group [nzSize]="'large'" nzCompact>
             <nz-select formControlName="phoneNumberPrefix" style="width: 25%;">
               <nz-option [nzLabel]="'+86'" [nzValue]="'+86'"></nz-option>
@@ -73,7 +73,7 @@ import {
         <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
           <label for="website" nz-form-item-required>Website</label>
         </div>
-        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('website')">
+        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
           <nz-input [nzSize]="'large'" formControlName="website" [nzId]="'website'"></nz-input>
           <div nz-form-explain *ngIf="getFormControl('website').dirty&&getFormControl('website').hasError('required')">Please input website!</div>
         </div>
@@ -82,7 +82,7 @@ import {
         <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
           <label for="captcha" nz-form-item-required>Captcha</label>
         </div>
-        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('captcha')">
+        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
           <div nz-row [nzGutter]="8">
             <div nz-col [nzSpan]="12">
               <nz-input [nzSize]="'large'" formControlName="captcha" [nzId]="'captcha'"></nz-input>

diff --git a/src/showcase/nz-demo-form/nz-demo-form-inline.component.ts b/src/showcase/nz-demo-form/nz-demo-form-inline.component.ts
@@ -10,7 +10,7 @@ import {
   template: `
     <form nz-form [nzLayout]="'inline'" [formGroup]="validateForm" (ngSubmit)="_submitForm()">
       <div nz-form-item>
-        <div nz-form-control [nzValidateStatus]="validateForm.controls.userName">
+        <div nz-form-control>
           <nz-input formControlName="userName" [nzPlaceHolder]="'Username'" [nzSize]="'large'">
             <ng-template #prefix>
               <i class="anticon anticon-user"></i>
@@ -20,7 +20,7 @@ import {
         </div>
       </div>
       <div nz-form-item>
-        <div nz-form-control [nzValidateStatus]="validateForm.controls.password">
+        <div nz-form-control>
           <nz-input formControlName="password" [nzType]="'password'" [nzPlaceHolder]="'Password'" [nzSize]="'large'">
             <ng-template #prefix>
               <i class="anticon anticon-lock"></i>

diff --git a/src/showcase/nz-demo-form/nz-demo-form-layout.component.ts b/src/showcase/nz-demo-form/nz-demo-form-layout.component.ts
@@ -31,7 +31,7 @@ import {
         <div nz-form-label nz-col [nzSpan]="isHorizontal?4:false">
           <label>Username</label>
         </div>
-        <div nz-form-control nz-col [nzSpan]="isHorizontal?14:false" [nzValidateStatus]="validateForm.controls.userName">
+        <div nz-form-control nz-col [nzSpan]="isHorizontal?14:false">
           <nz-input formControlName="userName" [nzPlaceHolder]="'Username'" [nzSize]="'large'">
           </nz-input>
           <div nz-form-explain *ngIf="validateForm.controls.userName.dirty&&validateForm.controls.userName.hasError('required')">Please input your username!</div>
@@ -41,7 +41,7 @@ import {
         <div nz-form-label nz-col [nzSpan]="isHorizontal?4:false">
           <label>Password</label>
         </div>
-        <div nz-form-control nz-col [nzSpan]="isHorizontal?14:false" [nzValidateStatus]="validateForm.controls.password">
+        <div nz-form-control nz-col [nzSpan]="isHorizontal?14:false">
           <nz-input formControlName="password" [nzType]="'password'" [nzPlaceHolder]="'Password'" [nzSize]="'large'">
           </nz-input>
           <div nz-form-explain *ngIf="validateForm.controls.password.dirty&&validateForm.controls.password.hasError('required')">Please input your Password!</div>

diff --git a/src/showcase/nz-demo-form/nz-demo-form-login.component.ts b/src/showcase/nz-demo-form/nz-demo-form-login.component.ts
@@ -10,7 +10,7 @@ import {
   template: `
     <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="_submitForm()">
       <div nz-form-item>
-        <div nz-form-control [nzValidateStatus]="validateForm.controls.userName">
+        <div nz-form-control>
           <nz-input formControlName="userName" [nzPlaceHolder]="'Username'" [nzSize]="'large'">
             <ng-template #prefix>
               <i class="anticon anticon-user"></i>
@@ -20,7 +20,7 @@ import {
         </div>
       </div>
       <div nz-form-item>
-        <div nz-form-control [nzValidateStatus]="validateForm.controls.password">
+        <div nz-form-control>
           <nz-input formControlName="password" [nzType]="'password'" [nzPlaceHolder]="'Password'" [nzSize]="'large'">
             <ng-template #prefix>
               <i class="anticon anticon-lock"></i>

diff --git a/src/showcase/nz-demo-form/nz-demo-form-validate-dynamic.component.ts b/src/showcase/nz-demo-form/nz-demo-form-validate-dynamic.component.ts
@@ -16,7 +16,7 @@ import { Observable } from 'rxjs/Observable';
         <div nz-form-label nz-col [nzSpan]="7">
           <label nz-form-item-required>Username</label>
         </div>
-        <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('userName')" nzHasFeedback>
+        <div nz-col [nzSpan]="12" nz-form-control nzHasFeedback>
           <nz-input formControlName="userName" [nzType]="'text'" [nzPlaceHolder]="'async validate try to write JasonWood'" [nzSize]="'large'">
           </nz-input>
           <div nz-form-explain *ngIf="getFormControl('userName').dirty&&getFormControl('userName').hasError('required')">Please input your username!</div>
@@ -28,7 +28,7 @@ import { Observable } from 'rxjs/Observable';
         <div nz-form-label nz-col [nzSpan]="7">
           <label nz-form-item-required>E-mail</label>
         </div>
-        <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('email')" nzHasFeedback>
+        <div nz-col [nzSpan]="12" nz-form-control nzHasFeedback>
           <nz-input formControlName="email" [nzPlaceHolder]="'email'" [nzType]="'email'" [nzSize]="'large'">
           </nz-input>
           <div nz-form-explain *ngIf="getFormControl('email').dirty&&getFormControl('email').hasError('email')">The input is not valid E-mail!</div>
@@ -39,7 +39,7 @@ import { Observable } from 'rxjs/Observable';
         <div nz-form-label nz-col [nzSpan]="7">
           <label nz-form-item-required>BirthDay</label>
         </div>
-        <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('birthDay')">
+        <div nz-col [nzSpan]="12" nz-form-control>
           <nz-datepicker formControlName="birthDay" [nzSize]="'large'" [nzPlaceHolder]="'Choose your birthday'" style="width: 100%;"></nz-datepicker>
           <div nz-form-explain *ngIf="getFormControl('birthDay').dirty&&getFormControl('birthDay').hasError('required')">Please input your birthday!</div>
           <div nz-form-explain *ngIf="getFormControl('birthDay').dirty&&getFormControl('birthDay').hasError('expired')">Birthday must less than today!</div>
@@ -50,7 +50,7 @@ import { Observable } from 'rxjs/Observable';
           <label nz-form-item-required>Password</label>
         </div>
         <div>
-          <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('password')" nzHasFeedback>
+          <div nz-col [nzSpan]="12" nz-form-control nzHasFeedback>
             <nz-input formControlName="password" [nzPlaceHolder]="'password'" [nzType]="'password'" [nzSize]="'large'" (ngModelChange)="validateConfirmPassword()">
             </nz-input>
             <div nz-form-explain *ngIf="getFormControl('password').dirty&&getFormControl('password').hasError('required')">Please input your password!</div>
@@ -61,7 +61,7 @@ import { Observable } from 'rxjs/Observable';
         <div nz-col [nzSpan]="7" nz-form-label>
           <label nz-form-item-required>Confirm Password</label>
         </div>
-        <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('passwordConfirmation')" nzHasFeedback>
+        <div nz-col [nzSpan]="12" nz-form-control nzHasFeedback>
           <nz-input formControlName="passwordConfirmation" [nzType]="'password'" [nzPlaceHolder]="'confirm your password'" [nzSize]="'large'">
           </nz-input>
           <div nz-form-explain *ngIf="getFormControl('passwordConfirmation').dirty&&getFormControl('passwordConfirmation').hasError('required')">Please confirm your password!</div>
@@ -72,7 +72,7 @@ import { Observable } from 'rxjs/Observable';
         <div nz-col [nzSpan]="7" nz-form-label>
           <label nz-form-item-required>Comment</label>
         </div>
-        <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('comment')">
+        <div nz-col [nzSpan]="12" nz-form-control>
           <nz-input formControlName="comment" [nzRows]="2" [nzType]="'textarea'" [nzPlaceHolder]="'write any thing'" [nzSize]="'large'">
           </nz-input>
           <div nz-form-explain *ngIf="getFormControl('comment').dirty&&getFormControl('comment').hasError('required')">Please write something here!</div>

diff --git a/src/showcase/nz-demo-form/nz-demo-form.html b/src/showcase/nz-demo-form/nz-demo-form.html
@@ -85,7 +85,7 @@ <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" titl
         <div intro>
           <p>我们为表单控件定义了三种校验状态，你可以不使用<code>Reactive Form</code>的异步返回数据，而直接定义表单的返回状态，定义<code>&lt;nz-form-control&gt;</code>的<code>nzValidateStatus</code> 输入即可。
           </p>
-          <p><code>nzValidateStatus</code>可选择状态有'success', 'warning', 'error', 'validating'四种。</p>
+          <p> <code>nzValidateStatus</code> 可选择状态有'success', 'warning', 'error', 'validating'四种。</p>
           <p>另外为输入框添加反馈图标，添加 <code>&lt;nz-form-control&gt;</code> 的 <code>nzHasFeedback</code> 属性即可。</p>
           <p><strong>注意</strong>: 反馈图标只对 <code>&lt;nz-input/&gt;</code> 有效。</p>
         </div>
@@ -96,7 +96,7 @@ <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" titl
           <div intro>
             <p>当使用
               <a href="https://v2.angular.cn/docs/ts/latest/cookbook/form-validation.html#!#reactive">响应式表单(Reactive Form)</a>
-              时，将<code>&lt;nz-form-control&gt;</code>的<code>nzValidateStatus</code> 属性定义为当前<code>formControlName</code>名称，
+              时，<code>&lt;nz-form-control&gt;</code> 的 <code>nzValidateStatus</code> 会自动从 <code>NgControl</code> 中获取数据，也可以手动指定特定的 <code>NgControl</code>
             </p>
             <p>组件将表单校验函数的校验过程和异步返回的结果显示对应的<code>error | validating(pending) | warning | success</code>状态，具体使用方式建议参照本demo
             </p>
@@ -165,8 +165,8 @@ <h3><span>[nz-form-control]</span><!-- <a class="anchor">#</a> --></h3>
         </tr>
         <tr>
           <td>nzValidateStatus</td>
-          <td>校验状态，属性定义为当前<code>formControl</code>名称可以根据异步返回数据自动显示，也可手动定义 可选：'success' 'warning' 'error' 'validating'</td>
-          <td>formControl|string</td>
+          <td>校验状态，当定义为 <code>NgControl</code> 时可以根据异步返回数据自动显示，也可手动定义为string 可选：'success' 'warning' 'error' 'validating'</td>
+          <td>NgControl|string</td>
           <td>-</td>
         </tr>
       </tbody>