From f324b132791bf1e71115996dcd9dfff1b77184f8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=89=A7=E8=A1=A1?= Date: Sun, 18 Mar 2018 23:58:12 +0800 Subject: [PATCH] fix(module:form): fix form init style miss & fix doc close #1170 close #1173 --- README.md | 2 +- components/form/demo/horizontal-login.ts | 1 - components/form/nz-form-control.component.ts | 23 ++++++----- components/form/nz-form-control.spec.ts | 40 ++++++++++++++++++- components/tag/doc/index.en-US.md | 2 +- components/tag/doc/index.zh-CN.md | 2 +- .../share/nz-codebox/nz-codebox.component.ts | 4 +- 7 files changed, 58 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index e71988b391..a198cddd9e 100644 --- a/README.md +++ b/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 [Stack Overflow](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 [Stack Overflow](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`! diff --git a/components/form/demo/horizontal-login.ts b/components/form/demo/horizontal-login.ts index 2733c04c23..8afb8e4367 100644 --- a/components/form/demo/horizontal-login.ts +++ b/components/form/demo/horizontal-login.ts @@ -1,6 +1,5 @@ import { Component, OnInit } from '@angular/core'; import { - AbstractControl, FormBuilder, FormGroup, Validators diff --git a/components/form/nz-form-control.component.ts b/components/form/nz-form-control.component.ts index 5a2cf0fee1..4e32582e91 100644 --- a/components/form/nz-form-control.component.ts +++ b/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); + } } } diff --git a/components/form/nz-form-control.spec.ts b/components/form/nz-form-control.spec.ts index d9b91581da..715fedaabc 100644 --- a/components/form/nz-form-control.spec.ts +++ b/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: ` +
+ + + +
+ ` +}) +export class NzTestReactiveFormControlInitStatusComponent { + formGroup: FormGroup; + + constructor(private formBuilder: FormBuilder) { + this.formGroup = this.formBuilder.group({ + input : [ '', [ Validators.required ] ] + }); + this.formGroup.controls.input.markAsDirty(); + } +} diff --git a/components/tag/doc/index.en-US.md b/components/tag/doc/index.en-US.md index 4e2dc5a2bd..421692d914 100644 --- a/components/tag/doc/index.en-US.md +++ b/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` | diff --git a/components/tag/doc/index.zh-CN.md b/components/tag/doc/index.zh-CN.md index a28cd1c87f..69ba90b82b 100644 --- a/components/tag/doc/index.zh-CN.md +++ b/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 | diff --git a/site_scripts/_site/src/app/share/nz-codebox/nz-codebox.component.ts b/site_scripts/_site/src/app/share/nz-codebox/nz-codebox.component.ts index 66cbe16d3d..dfef0d77d5 100644 --- a/site_scripts/_site/src/app/share/nz-codebox/nz-codebox.component.ts +++ b/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} ] })