fix(module:form): fix form control template driven (#3305)

close #3211

README-zh_CN.md

@@ -117,7 +117,7 @@ $ npm run site:start
 
 ## 🗺 Road Map
 
-查看 [这个 issue](https://github.com/NG-ZORRO/ng-zorro-antd/issues/2025) 来了解我们 2018 下半年的开发计划。
+查看 [这个 issue](https://github.com/NG-ZORRO/ng-zorro-antd/issues/2025) 来了解我们 2019 年的开发计划。
 
 ## 🤝 如何贡献
 

README.md

@@ -124,7 +124,7 @@ Browser would open automatically.
 
 ## 🗺 Road Map
 
-Check [this issue](https://github.com/NG-ZORRO/ng-zorro-antd/issues/2025) to read our plans for later 2018.
+Check [this issue](https://github.com/NG-ZORRO/ng-zorro-antd/issues/2025) to read our plans for 2019.
 
 ## 🤝 Contributing
 

components/form/doc/index.en-US.md

@@ -96,6 +96,8 @@ A form consists of one or more form fields whose type includes input, textarea,
 | `[nzValidateStatus]` | Template-driven Forms: The validation status | `'success'｜'warning'｜'error'｜'validating'` | - |
 | `[nzHasFeedback]`| Used with `nzValidateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input`. | `boolean` | `false` |
 
+From `7.3.0` version, `nz-form-control` provide `status` variable, it will switch between `'success'｜'warning'｜'error'｜'validating'` automatically according to `[nzValidateStatus]` passed in, user can get it from template reference variables.
+
 ### nz-form-explain
 
 Validation messages

components/form/doc/index.zh-CN.md

@@ -95,6 +95,8 @@ import { NzFormModule } from 'ng-zorro-antd';
 | `[nzValidateStatus]` | Template-driven Forms：校验状态 | `'success'｜'warning'｜'error'｜'validating'` | - |
 | `[nzHasFeedback]`| 配合 `nzValidateStatus` 属性使用，展示校验状态图标	 | `boolean` | `false`|
 
+从 7.3.0 版本开始，`nz-form-control` 提供了 `status` 变量用于指示校验状态，`status` 会自动根据 `[nzValidateStatus]` 在 `'success'｜'warning'｜'error'｜'validating'` 中自动切换，用户可以通过模板变量导出 `status` 用于切换提示信息。
+
 ### nz-form-explain
 
 用于显示提示信息，会自动根据当前的 nzValidateStatus 显示不同的颜色

components/form/nz-form-control.component.ts

@@ -14,7 +14,7 @@ import {
   Renderer2,
   ViewEncapsulation
 } from '@angular/core';
-import { FormControl, FormControlName, NgControl } from '@angular/forms';
+import { FormControl, FormControlName, NgControl, NgModel } from '@angular/forms';
 import { Subscription } from 'rxjs';
 import { startWith } from 'rxjs/operators';
 
@@ -44,9 +44,10 @@ export class NzFormControlComponent extends NzColDirective
   private _hasFeedback = false;
   validateChanges: Subscription | null;
   validateString: string | null;
+  status: 'warning' | 'validating' | 'error' | 'success' | 'init';
   controlClassMap: NgClassType = {};
   iconType: string;
-  validateControl: FormControl | null;
+  validateControl: FormControl | NgModel | null;
   @ContentChild(NgControl) defaultValidateControl: FormControlName;
 
   @Input()
@@ -60,8 +61,8 @@ export class NzFormControlComponent extends NzColDirective
   }
 
   @Input()
-  set nzValidateStatus(value: string | FormControl | FormControlName) {
-    if (value instanceof FormControl) {
+  set nzValidateStatus(value: string | FormControl | FormControlName | NgModel) {
+    if (value instanceof FormControl || value instanceof NgModel) {
       this.validateControl = value;
       this.validateString = null;
       this.watchControl();
@@ -95,36 +96,39 @@ export class NzFormControlComponent extends NzColDirective
   }
 
   validateControlStatus(status: string): boolean {
-    return (
-      !!this.validateControl &&
+    return (!!this.validateControl &&
       (this.validateControl.dirty || this.validateControl.touched) &&
-      this.validateControl.status === status
-    );
+      this.validateControl.status === status) as boolean;
   }
 
   setControlClassMap(): void {
-    this.controlClassMap = {
-      [`has-warning`]: this.validateString === 'warning',
-      [`is-validating`]:
-        this.validateString === 'validating' ||
-        this.validateString === 'pending' ||
-        this.validateControlStatus('PENDING'),
-      [`has-error`]: this.validateString === 'error' || this.validateControlStatus('INVALID'),
-      [`has-success`]: this.validateString === 'success' || this.validateControlStatus('VALID'),
-      [`has-feedback`]: this.nzHasFeedback
-    };
-
-    if (this.controlClassMap['has-warning']) {
+    if (this.validateString === 'warning') {
+      this.status = 'warning';
       this.iconType = 'exclamation-circle-fill';
-    } else if (this.controlClassMap['is-validating']) {
+    } else if (
+      this.validateString === 'validating' ||
+      this.validateString === 'pending' ||
+      this.validateControlStatus('PENDING')
+    ) {
+      this.status = 'validating';
       this.iconType = 'loading';
-    } else if (this.controlClassMap['has-error']) {
+    } else if (this.validateString === 'error' || this.validateControlStatus('INVALID')) {
+      this.status = 'error';
       this.iconType = 'close-circle-fill';
-    } else if (this.controlClassMap['has-success']) {
+    } else if (this.validateString === 'success' || this.validateControlStatus('VALID')) {
+      this.status = 'success';
       this.iconType = 'check-circle-fill';
     } else {
+      this.status = 'init';
       this.iconType = '';
     }
+    this.controlClassMap = {
+      [`has-warning`]: this.status === 'warning',
+      [`is-validating`]: this.status === 'validating',
+      [`has-error`]: this.status === 'error',
+      [`has-success`]: this.status === 'success',
+      [`has-feedback`]: this.nzHasFeedback
+    };
   }
 
   constructor(