Skip to content

Commit

Permalink
feat(module:form): support default nzValidateStatus & support more er…
Browse files Browse the repository at this point in the history
…ror status (#696)

close #693 close #692
  • Loading branch information
vthinkxie authored Dec 8, 2017
1 parent b5e9aee commit 3d4213f
Show file tree
Hide file tree
Showing 8 changed files with 41 additions and 40 deletions.
33 changes: 17 additions & 16 deletions src/components/form/nz-form-control.component.ts
Original file line number Diff line number Diff line change
@@ -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({
Expand All @@ -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) {
Expand All @@ -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);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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'"
Expand Down
14 changes: 7 additions & 7 deletions src/showcase/nz-demo-form/nz-demo-form-horizontal.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/showcase/nz-demo-form/nz-demo-form-inline.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/showcase/nz-demo-form/nz-demo-form-layout.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/showcase/nz-demo-form/nz-demo-form-login.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions src/showcase/nz-demo-form/nz-demo-form.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 3d4213f

Please sign in to comment.