diff --git a/src/components/form/nz-form-control.component.ts b/src/components/form/nz-form-control.component.ts index e1676deea4c..19289f2ae1b 100644 --- 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'; `, 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 index 83a564e79ab..8c68e58a750 100644 --- 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 {
-
+
-
+
The input is not valid E-mail!
@@ -23,7 +23,7 @@ import {
-
+
Please input your password!
@@ -32,7 +32,7 @@ import {
-
+
Please confirm your password!
Two passwords that you enter is inconsistent!
@@ -49,7 +49,7 @@ import {
-
+
Please input your nickname!
@@ -58,7 +58,7 @@ import {
-
+
@@ -73,7 +73,7 @@ import {
-
+
Please input website!
@@ -82,7 +82,7 @@ import {
-
+
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 index 08dadf1ed00..e294cbd85f2 100644 --- 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: `
-
+
@@ -20,7 +20,7 @@ import {
-
+
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 index a8b7d86baa8..f5c4dc84bd1 100644 --- 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 {
-
+
Please input your username!
@@ -41,7 +41,7 @@ import {
-
+
Please input your Password!
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 index 75e0a2670e8..1a786939f4e 100644 --- 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: `
-
+
@@ -20,7 +20,7 @@ import {
-
+
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 index 71dcceb8130..ed60e43ced2 100644 --- 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';
-
+
Please input your username!
@@ -28,7 +28,7 @@ import { Observable } from 'rxjs/Observable';
-
+
The input is not valid E-mail!
@@ -39,7 +39,7 @@ import { Observable } from 'rxjs/Observable';
-
+
Please input your birthday!
Birthday must less than today!
@@ -50,7 +50,7 @@ import { Observable } from 'rxjs/Observable';
-
+
Please input your password!
@@ -61,7 +61,7 @@ import { Observable } from 'rxjs/Observable';
-
+
Please confirm your password!
@@ -72,7 +72,7 @@ import { Observable } from 'rxjs/Observable';
-
+
Please write something here!
diff --git a/src/showcase/nz-demo-form/nz-demo-form.html b/src/showcase/nz-demo-form/nz-demo-form.html index 6a5dc7899bb..182ab540c87 100644 --- a/src/showcase/nz-demo-form/nz-demo-form.html +++ b/src/showcase/nz-demo-form/nz-demo-form.html @@ -85,7 +85,7 @@

代码演示

我们为表单控件定义了三种校验状态,你可以不使用Reactive Form的异步返回数据,而直接定义表单的返回状态,定义<nz-form-control>nzValidateStatus 输入即可。

-

nzValidateStatus可选择状态有'success', 'warning', 'error', 'validating'四种。

+

nzValidateStatus 可选择状态有'success', 'warning', 'error', 'validating'四种。

另外为输入框添加反馈图标,添加 <nz-form-control>nzHasFeedback 属性即可。

注意: 反馈图标只对 <nz-input/> 有效。

@@ -96,7 +96,7 @@

代码演示

当使用 响应式表单(Reactive Form) - 时,将<nz-form-control>nzValidateStatus 属性定义为当前formControlName名称, + 时,<nz-form-control>nzValidateStatus 会自动从 NgControl 中获取数据,也可以手动指定特定的 NgControl

组件将表单校验函数的校验过程和异步返回的结果显示对应的error | validating(pending) | warning | success状态,具体使用方式建议参照本demo

@@ -165,8 +165,8 @@

[nz-form-control]

nzValidateStatus - 校验状态,属性定义为当前formControl名称可以根据异步返回数据自动显示,也可手动定义 可选:'success' 'warning' 'error' 'validating' - formControl|string + 校验状态,当定义为 NgControl 时可以根据异步返回数据自动显示,也可手动定义为string 可选:'success' 'warning' 'error' 'validating' + NgControl|string -