fix(module:autocomplete): form related bugs (NG-ZORRO#1451)

style(module:autocomplete): fix test lint test(module:autocomplete): add test clean close NG-ZORRO#1437
hsuanxyz · May 17, 2018 · 5db7e63 · 5db7e63
1 parent 62ec1f0
commit 5db7e63
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 4 deletions.
diff --git a/components/auto-complete/nz-autocomplete-trigger.directive.ts b/components/auto-complete/nz-autocomplete-trigger.directive.ts
@@ -278,7 +278,7 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
   }
 
   private setTriggerValue(value: string | number | null): void {
-    this._element.nativeElement.value = value;
+    this._element.nativeElement.value = value || '';
   }
 
   private doBackfill(): void {
@@ -318,7 +318,9 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
     return !element.readOnly && !element.disabled;
   }
 
-  writeValue(obj: {}): void {
+  // tslint:disable-next-line:no-any
+  writeValue(value: any): void {
+    this.setTriggerValue(value);
   }
 
   registerOnChange(fn: (value: {}) => {}): void {
@@ -329,6 +331,12 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
     this._onTouched = fn;
   }
 
+  setDisabledState(isDisabled: boolean): void {
+    const element: HTMLInputElement = this._element.nativeElement;
+    element.disabled = isDisabled;
+    this.closePanel();
+  }
+
   ngOnDestroy(): void {
     this.destroyPanel();
   }

diff --git a/components/auto-complete/nz-autocomplete.spec.ts b/components/auto-complete/nz-autocomplete.spec.ts
@@ -12,7 +12,7 @@ import {
   ViewChildren
 } from '@angular/core';
 import { async, fakeAsync, flush, inject, tick, TestBed } from '@angular/core/testing';
-import { FormsModule, FormControl, 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 { Subject } from 'rxjs/Subject';
@@ -48,7 +48,8 @@ describe('auto-complete', () => {
         NzTestAutocompletePropertyComponent,
         NzTestAutocompleteWithoutPanelComponent,
         NzTestAutocompleteGroupComponent,
-        NzTestAutocompleteWithOnPushDelayComponent
+        NzTestAutocompleteWithOnPushDelayComponent,
+        NzTestAutocompleteWithFormComponent
       ],
       providers   : [
         { provide: Directionality, useFactory: () => ({ value: dir }) },
@@ -418,6 +419,58 @@ describe('auto-complete', () => {
 
   });
 
+  describe('form', () => {
+    let fixture;
+    let input: HTMLInputElement;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(NzTestAutocompleteWithFormComponent);
+      fixture.detectChanges();
+      input = fixture.debugElement.query(By.css('input')).nativeElement;
+    });
+
+    it('should set the value with form', () => {
+      const componentInstance = fixture.componentInstance;
+      fixture.detectChanges();
+      expect(componentInstance.form.get('formControl').value)
+        .toContain('Burns');
+      expect(input.value)
+        .toContain('Burns');
+    });
+
+    it('should set disabled work', () => {
+      const componentInstance = fixture.componentInstance;
+      const formControl = (componentInstance.form as FormGroup).get('formControl');
+      fixture.detectChanges();
+
+      expect(input.disabled).toBe(false);
+
+      formControl.disable();
+      fixture.detectChanges();
+
+      expect(input.disabled).toBe(true);
+
+    });
+
+    it('should close the panel when the input is disabled', () => {
+      const componentInstance = fixture.componentInstance;
+      const formControl = (componentInstance.form as FormGroup).get('formControl');
+      fixture.detectChanges();
+
+      componentInstance.trigger.openPanel();
+      fixture.detectChanges();
+
+      expect(componentInstance.trigger.panelOpen).toBe(true);
+
+      formControl.disable();
+      fixture.detectChanges();
+
+      expect(input.disabled).toBe(true);
+      expect(componentInstance.trigger.panelOpen).toBe(false);
+
+    });
+  });
+
   describe('option groups', () => {
     let fixture;
     let input;
@@ -950,3 +1003,23 @@ class NzTestAutocompleteGroupComponent {
 
   @ViewChild(NzAutocompleteTriggerDirective) trigger: NzAutocompleteTriggerDirective;
 }
+
+@Component({
+  template: `
+    <form [formGroup]='form'>
+      <input formControlName="formControl" [nzAutocomplete]="auto"/>
+      <nz-autocomplete #auto>
+        <nz-auto-option *ngFor="let option of options" [nzValue]="option">{{option}}</nz-auto-option>
+      </nz-autocomplete>
+    </form>
+  `
+})
+class NzTestAutocompleteWithFormComponent {
+  form: FormGroup;
+  options = ['Burns Bay Road', 'Downing Street', 'Wall Street'];
+  @ViewChild(NzAutocompleteTriggerDirective) trigger: NzAutocompleteTriggerDirective;
+
+  constructor(private fb: FormBuilder) {
+    this.form = this.fb.group({ formControl: 'Burns' });
+  }
+}