fix(module:select): fix select init touched state error when disabled (…

…NG-ZORRO#3084) close NG-ZORRO#3059
Ricbet · Apr 9, 2020 · d28b2fd · d28b2fd
1 parent fdec23d
commit d28b2fd
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 3 deletions.
diff --git 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<NzTestSelectFormDisabledTouchedComponent>;
+    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: `
+    <form [formGroup]="formGroup">
+      <nz-select
+        formControlName="select">
+        <nz-option nzValue="jack" nzLabel="Jack"></nz-option>
+        <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
+      </nz-select>
+    </form>
+  `
+})
+export class NzTestSelectFormDisabledTouchedComponent {
+  formGroup: FormGroup;
+
+  constructor() {
+    this.formGroup = new FormGroup({ select: new FormControl({ value: 'lucy', disabled: true }) });
+  }
+}
+
 @Component({
   template: `
     <nz-select>

diff --git 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 {