diff --git a/components/select/nz-select.component.spec.ts b/components/select/nz-select.component.spec.ts index 667b5d7c06c..430e0893d86 100644 --- a/components/select/nz-select.component.spec.ts +++ b/components/select/nz-select.component.spec.ts @@ -1,7 +1,7 @@ import { DOWN_ARROW, ENTER, ESCAPE, SPACE, TAB, UP_ARROW } from '@angular/cdk/keycodes'; import { Component, DebugElement } from '@angular/core'; import { async, fakeAsync, flush, inject, tick, ComponentFixture, TestBed } from '@angular/core/testing'; -import { FormsModule, FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { FormsModule, FormBuilder, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { dispatchKeyboardEvent } from '../core/testing'; @@ -18,7 +18,7 @@ describe('nz-select component', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports : [ NzSelectModule, NoopAnimationsModule, FormsModule, ReactiveFormsModule ], - declarations: [ NzTestSelectDefaultComponent, NzTestSelectTagsComponent, NzTestSelectFormComponent, NzTestOptionChangeComponent ] + declarations: [ NzTestSelectDefaultComponent, NzTestSelectTagsComponent, NzTestSelectFormComponent, NzTestOptionChangeComponent, NzTestSelectFormDisabledTouchedComponent ] }); TestBed.compileComponents(); inject([ OverlayContainer ], (oc: OverlayContainer) => { @@ -361,6 +361,24 @@ describe('nz-select component', () => { expect(changeSpy).toHaveBeenCalledTimes(4); }); }); + + describe('form init state', () => { + let fixture: ComponentFixture; + let testComponent: NzTestSelectFormDisabledTouchedComponent; + beforeEach(() => { + fixture = TestBed.createComponent(NzTestSelectFormDisabledTouchedComponent); + fixture.detectChanges(); + testComponent = fixture.debugElement.componentInstance; + }); + /** https://github.com/NG-ZORRO/ng-zorro-antd/issues/3059 **/ + it('should init disabled state with touched false', fakeAsync(() => { + fixture.detectChanges(); + flush(); + fixture.detectChanges(); + expect(testComponent.formGroup.controls.select.touched).toBe(false); + })); + }); + }); @Component({ @@ -465,6 +483,25 @@ export class NzTestSelectFormComponent { } } +@Component({ + template: ` +
+ + + + +
+ ` +}) +export class NzTestSelectFormDisabledTouchedComponent { + formGroup: FormGroup; + + constructor() { + this.formGroup = new FormGroup({ select: new FormControl({ value: 'lucy', disabled: true }) }); + } +} + @Component({ template: ` diff --git a/components/select/nz-select.component.ts b/components/select/nz-select.component.ts index 4bb3d0cda0a..89298f3572a 100644 --- a/components/select/nz-select.component.ts +++ b/components/select/nz-select.component.ts @@ -82,6 +82,7 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterVie triggerWidth: number; private _disabled = false; private _autoFocus = false; + private isInit = false; private destroy$ = new Subject(); @ViewChild(CdkOverlayOrigin) cdkOverlayOrigin: CdkOverlayOrigin; @ViewChild(CdkConnectedOverlay) cdkConnectedOverlay: CdkConnectedOverlay; @@ -167,7 +168,7 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterVie this._disabled = toBoolean(value); this.nzSelectService.disabled = this._disabled; this.nzSelectService.check(); - if (this.nzDisabled) { + if (this.nzDisabled && this.isInit) { this.closeDropDown(); } } @@ -308,6 +309,7 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterVie ngAfterViewInit(): void { this.updateCdkConnectedOverlayStatus(); + this.isInit = true; } ngAfterContentInit(): void {