fix(module:form): fix form init style miss & fix doc (#1174)

close #1170 close #1173

README.md

@@ -67,6 +67,6 @@ If you'd like to help us improve ng-zorro-antd, just create a [Pull Request](htt
 
 ## Need Help?
 
-For questions on how to use antd, please post questions to [<img alt="Stack Overflow" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66" width="140" />](http://stackoverflow.com/questions/tagged/ng-zorro) using the `antd` tag. If you're not finding what you need on stackoverflow, you can find us on [![Gitter](https://img.shields.io/gitter/room/ng-zorro/ng-zorro-antd.svg?style=flat-square)](https://gitter.im/ng-zorro/ng-zorro-antd) as well.
+For questions on how to use ng-zorro-antd, please post questions to [<img alt="Stack Overflow" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66" width="140" />](http://stackoverflow.com/questions/tagged/ng-zorro) using the `ng-zorro` tag. If you're not finding what you need on stackoverflow, you can find us on [![Gitter](https://img.shields.io/gitter/room/ng-zorro/ng-zorro-antd.svg?style=flat-square)](https://gitter.im/ng-zorro/ng-zorro-antd) as well.
 
 As always, we encourage experienced users to help those who are not familiar with `ng-zorro-antd`!

components/form/demo/horizontal-login.ts

@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import {
-  AbstractControl,
   FormBuilder,
   FormGroup,
   Validators

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

@@ -65,18 +65,20 @@ export class NzFormControlComponent extends NzColComponent implements OnDestroy,
     }
   }
 
+  updateValidateStatus(status: string): void {
+    if (this.validateControl.dirty) {
+      this.controlStatus = status;
+      this.setControlClassMap();
+    } else {
+      this.controlStatus = null;
+      this.setControlClassMap();
+    }
+  }
+
   watchControl(): void {
     this.removeSubscribe();
     if (this.validateControl && this.validateControl.statusChanges) {
-      this.validateChanges = this.validateControl.statusChanges.subscribe(data => {
-        if (this.validateControl.dirty) {
-          this.controlStatus = data;
-          this.setControlClassMap();
-        } else {
-          this.controlStatus = null;
-          this.setControlClassMap();
-        }
-      });
+      this.validateChanges = this.validateControl.statusChanges.subscribe(data => this.updateValidateStatus(data));
     }
 
   }
@@ -102,5 +104,8 @@ export class NzFormControlComponent extends NzColComponent implements OnDestroy,
 
   ngAfterContentInit(): void {
     this.watchControl();
+    if (this.validateControl) {
+      this.updateValidateStatus(this.validateControl.status);
+    }
   }
 }

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

@@ -10,7 +10,7 @@ describe('nz-form-control', () => {
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
       imports     : [ NzFormModule, NoopAnimationsModule, ReactiveFormsModule, FormsModule ],
-      declarations: [ NzTestStaticFormControlComponent, NzTestReactiveFormControlComponent ]
+      declarations: [ NzTestStaticFormControlComponent, NzTestReactiveFormControlComponent, NzTestReactiveFormControlInitStatusComponent ]
     });
     TestBed.compileComponents();
   }));
@@ -141,6 +141,23 @@ describe('nz-form-control', () => {
       expect(formControls[ 1 ].nativeElement.querySelector('.ant-form-item-control').classList).toContain('has-error');
     }));
   });
+  describe('reactive init status', () => {
+    let fixture;
+    let testComponent;
+    let formControl;
+    beforeEach(() => {
+      fixture = TestBed.createComponent(NzTestReactiveFormControlInitStatusComponent);
+      fixture.detectChanges();
+      testComponent = fixture.debugElement.componentInstance;
+      formControl = fixture.debugElement.query(By.directive(NzFormControlComponent));
+    });
+    it('should init status correct', fakeAsync(() => {
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+      expect(formControl.nativeElement.querySelector('.ant-form-item-control').classList).toContain('has-error');
+    }));
+  });
 });
 
 @Component({
@@ -178,3 +195,24 @@ export class NzTestReactiveFormControlComponent {
     this.validateStatus = this.formGroup.get('input2');
   }
 }
+
+/** https://github.com/NG-ZORRO/ng-zorro-antd/issues/1170 **/
+@Component({
+  template: `
+    <form [formGroup]="formGroup">
+      <nz-form-control>
+        <input formControlName="input">
+      </nz-form-control>
+    </form>
+  `
+})
+export class NzTestReactiveFormControlInitStatusComponent {
+  formGroup: FormGroup;
+
+  constructor(private formBuilder: FormBuilder) {
+    this.formGroup = this.formBuilder.group({
+      input : [ '', [ Validators.required ] ]
+    });
+    this.formGroup.controls.input.markAsDirty();
+  }
+}

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

@@ -18,7 +18,7 @@ Tag for categorizing or markup.
 
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
-| nzMode | Mode of tag | `'closable'丨'default'丨'checkable'` | `default` |
+| nzMode | Mode of tag | `'closeable'丨'default'丨'checkable'` | `default` |
 | nzAfterClose | Callback executed when close animation is completed, only works when `nzMode="closable"` | () => void | - |
 | nzOnClose | Callback executed when tag is closed, only works when `nzMode="closable"`| (e:MouseEvent) => void | - |
 | nzChecked | Checked status of Tag, double binding, only works when `nzMode="checkable"` | boolean | `false` |

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

@@ -18,7 +18,7 @@ title: Tag
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| nzMode | 设定标签工作的模式 | `'closable'丨'default'丨'checkable'` | `default` |
+| nzMode | 设定标签工作的模式 | `'closeable'丨'default'丨'checkable'` | `default` |
 | nzAfterClose | 关闭动画完成后的回调，在 `nzMode="closable"` 时可用 | () => void | - |
 | nzOnClose | 关闭时的回调，在 `nzMode="closable"` 时可用 | (e:MouseEvent) => void | - |
 | nzChecked | 设置标签的选中状态，可双向绑定，在 `nzMode="checkable"` 时可用 | boolean | false |

site_scripts/_site/src/app/share/nz-codebox/nz-codebox.component.ts

@@ -223,14 +223,14 @@ import 'zone.js/dist/zone';  // Included with Angular CLI.
         'app/app.module.ts'   : `import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 import { NgZorroAntdModule } from 'ng-zorro-antd';
 
 import { ${this.nzComponentName} } from './app.component';
 
 @NgModule({
-  imports:      [ BrowserModule, FormsModule, HttpClientModule, NgZorroAntdModule.forRoot(), BrowserAnimationsModule ],
+  imports:      [ BrowserModule, FormsModule, HttpClientModule, ReactiveFormsModule, NgZorroAntdModule.forRoot(), BrowserAnimationsModule ],
   declarations: [ ${this.nzComponentName} ],
   bootstrap:    [ ${this.nzComponentName} ]
 })