Skip to content

Commit

Permalink
fix(module:form): fix form init style miss & fix doc (#1174)
Browse files Browse the repository at this point in the history
close #1170 close #1173
  • Loading branch information
vthinkxie committed Mar 18, 2018
1 parent 5c07161 commit ab37862
Show file tree
Hide file tree
Showing 7 changed files with 58 additions and 16 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`!
1 change: 0 additions & 1 deletion components/form/demo/horizontal-login.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { Component, OnInit } from '@angular/core';
import {
AbstractControl,
FormBuilder,
FormGroup,
Validators
Expand Down
23 changes: 14 additions & 9 deletions components/form/nz-form-control.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}

}
Expand All @@ -102,5 +104,8 @@ export class NzFormControlComponent extends NzColComponent implements OnDestroy,

ngAfterContentInit(): void {
this.watchControl();
if (this.validateControl) {
this.updateValidateStatus(this.validateControl.status);
}
}
}
40 changes: 39 additions & 1 deletion components/form/nz-form-control.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}));
Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -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();
}
}
2 changes: 1 addition & 1 deletion components/tag/doc/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -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` |
Expand Down
2 changes: 1 addition & 1 deletion components/tag/doc/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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} ]
})
Expand Down

0 comments on commit ab37862

Please sign in to comment.