fix(module:tree-select): fix unable to set null (#1760)

* fix(module:tree-select): fix unable to set null close #1740 * test(module:tree-select): fix test
NG-ZORRO · Jul 1, 2018 · 689f8b4 · 689f8b4
1 parent 89d05f9
commit 689f8b4
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 5 deletions.
diff --git a/components/tree-select/nz-tree-select.component.ts b/components/tree-select/nz-tree-select.component.ts
@@ -378,6 +378,12 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, Afte
         this.value = [ (value as string) ];
       }
       setTimeout(() => this.updateSelectedNodes(), 100);
+    } else {
+      this.value = [];
+      this.selectedNodes.forEach(node => {
+        this.removeSelected(node, false);
+      });
+      this.selectedNodes = [];
     }
   }
 

diff --git a/components/tree-select/nz-tree-select.spec.ts b/components/tree-select/nz-tree-select.spec.ts
@@ -112,6 +112,17 @@ describe('tree-select component', () => {
       fixture.detectChanges();
       expect(testComponent.value).toBe(null);
     }));
+    it('should set null value work', fakeAsync(() => {
+      fixture.detectChanges();
+      expect(testComponent.value).toBe('10001');
+      testComponent.setNull();
+      fixture.detectChanges();
+      tick(200);
+      fixture.detectChanges();
+      expect(testComponent.value).toBe(null);
+      expect(treeSelectComponent.selectedNodes.length).toBe(0);
+      expect(treeSelectComponent.value.length).toBe(0);
+    }));
     it('should dropdown style work', fakeAsync(() => {
       treeSelect.nativeElement.click();
       fixture.detectChanges();
@@ -219,6 +230,20 @@ describe('tree-select component', () => {
       expect(input.style.width === '').toBe(true);
     }));
 
+    it('should set null value work', fakeAsync(() => {
+      fixture.detectChanges();
+      expect(testComponent.value[0]).toBe('1000122');
+      treeSelectComponent.updateSelectedNodes();
+      fixture.detectChanges();
+      testComponent.setNull();
+      fixture.detectChanges();
+      tick(200);
+      fixture.detectChanges();
+      expect(testComponent.value).toBe(null);
+      expect(treeSelectComponent.selectedNodes.length).toBe(0);
+      expect(treeSelectComponent.value.length).toBe(0);
+    }));
+
     it('should remove checked when press backs', fakeAsync(() => {
       treeSelect.nativeElement.click();
       fixture.detectChanges();
@@ -257,11 +282,13 @@ describe('tree-select component', () => {
     let fixture;
     let testComponent;
     let treeSelect;
+    let treeSelectComponent: NzTreeSelectComponent;
     beforeEach(() => {
       fixture = TestBed.createComponent(NzTestTreeSelectFormComponent);
       fixture.detectChanges();
       testComponent = fixture.debugElement.componentInstance;
       treeSelect = fixture.debugElement.query(By.directive(NzTreeSelectComponent));
+      treeSelectComponent = treeSelect.componentInstance;
     });
     it('should set disabled work', fakeAsync(() => {
       fixture.detectChanges();
@@ -274,6 +301,20 @@ describe('tree-select component', () => {
       fixture.detectChanges();
       expect(treeSelect.nativeElement.classList).toContain('ant-select-disabled');
     }));
+
+    it('should set null value work', fakeAsync(() => {
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+      expect(testComponent.formGroup.get('select').value).toBe('10021');
+      testComponent.setNull();
+      fixture.detectChanges();
+      tick(200);
+      fixture.detectChanges();
+      expect(testComponent.formGroup.get('select').value).toBe(null);
+      expect(treeSelectComponent.selectedNodes.length).toBe(0);
+      expect(treeSelectComponent.value.length).toBe(0);
+    }));
   });
 
 });
@@ -364,6 +405,10 @@ export class NzTestTreeSelectBasicComponent {
       ]
     })
   ];
+
+  setNull(): void {
+    this.value = null;
+  }
 }
 
 @Component({
@@ -444,6 +489,10 @@ export class NzTestTreeSelectCheckableComponent {
       ]
     })
   ];
+
+  setNull(): void {
+    this.value = null;
+  }
 }
 
 @Component({
@@ -453,8 +502,7 @@ export class NzTestTreeSelectCheckableComponent {
       <nz-tree-select
         formControlName="select"
         style="width: 250px"
-        [nzNodes]="nodes"
-        [(ngModel)]="value">
+        [nzNodes]="nodes">
       </nz-tree-select>
     </form>
   `
@@ -478,13 +526,17 @@ export class NzTestTreeSelectFormComponent {
     })
   ];
 
-  constructor(private formBuilder: FormBuilder) {
-    this.formGroup = this.formBuilder.group({
-      select: [ '10021' ]
+  constructor(private fb: FormBuilder) {
+    this.formGroup = this.fb.group({
+      select: '10021'
     });
   }
 
   disable(): void {
     this.formGroup.disable();
   }
+
+  setNull(): void {
+    this.formGroup.get('select').reset(null);
+  }
 }