fix(module:radio): fix radio disabled bug in group (NG-ZORRO#1746)

close NG-ZORRO#1734
hsuanxyz · Jun 28, 2018 · 35dde90 · 35dde90
1 parent 8261e7f
commit 35dde90
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 9 deletions.
diff --git a/components/radio/nz-radio-group.component.ts b/components/radio/nz-radio-group.component.ts
@@ -7,6 +7,8 @@ import {
   Input
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { isNotNil } from '../core/util/check';
+import { toBoolean } from '../core/util/convert';
 
 export type NzRadioGroupSizeType = 'large' | 'default' | 'small';
 
@@ -31,7 +33,7 @@ import { NzRadioComponent } from './nz-radio.component';
 export class NzRadioGroupComponent implements AfterContentInit, ControlValueAccessor {
   private _size: NzRadioGroupSizeType = 'default';
   private _name: string;
-  private _disabled: boolean = false;
+  private _disabled: boolean;
   el: HTMLElement;
   value: string;
 
@@ -52,7 +54,7 @@ export class NzRadioGroupComponent implements AfterContentInit, ControlValueAcce
 
   @Input()
   set nzDisabled(value: boolean) {
-    this._disabled = value;
+    this._disabled = toBoolean(value);
     this.updateDisabledState();
   }
 
@@ -71,9 +73,11 @@ export class NzRadioGroupComponent implements AfterContentInit, ControlValueAcce
   }
 
   updateDisabledState(): void {
-    this.radios.forEach((radio) => {
-      radio.nzDisabled = this.nzDisabled;
-    });
+    if (isNotNil(this.nzDisabled)) {
+      this.radios.forEach((radio) => {
+        radio.nzDisabled = this.nzDisabled;
+      });
+    }
   }
 
   updateChildrenName(): void {

diff --git a/components/radio/nz-radio.spec.ts b/components/radio/nz-radio.spec.ts
@@ -167,7 +167,7 @@ describe('radio', () => {
       radios = fixture.debugElement.queryAll(By.directive(NzRadioButtonComponent));
       radioGroup = fixture.debugElement.query(By.directive(NzRadioGroupComponent));
     });
-    it('should disable work', fakeAsync(() => {
+    it('should group disable work', fakeAsync(() => {
       fixture.detectChanges();
       expect(testComponent.value).toBe('A');
       radios[ 1 ].nativeElement.click();
@@ -177,6 +177,19 @@ describe('radio', () => {
       expect(radios[ 1 ].nativeElement.firstElementChild.classList).not.toContain('ant-radio-button-checked');
       expect(testComponent.value).toBe('A');
     }));
+    it('should single disable work', fakeAsync(() => {
+      testComponent.disabled = false;
+      fixture.detectChanges();
+      testComponent.singleDisabled = true;
+      fixture.detectChanges();
+      expect(testComponent.value).toBe('A');
+      radios[ 2 ].nativeElement.click();
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+      expect(radios[ 2 ].nativeElement.firstElementChild.classList).not.toContain('ant-radio-button-checked');
+      expect(testComponent.value).toBe('A');
+    }));
   });
   describe('radio form', () => {
     let fixture;
@@ -238,11 +251,11 @@ describe('radio', () => {
     it('should set disabled work', fakeAsync(() => {
       flush();
       expect(testComponent.formGroup.get('radioGroup').value).toBe('B');
-      radios[0].nativeElement.click();
+      radios[ 0 ].nativeElement.click();
       fixture.detectChanges();
       expect(testComponent.formGroup.get('radioGroup').value).toBe('A');
       testComponent.disable();
-      radios[1].nativeElement.click();
+      radios[ 1 ].nativeElement.click();
       fixture.detectChanges();
       expect(testComponent.formGroup.get('radioGroup').value).toBe('A');
     }));
@@ -340,13 +353,15 @@ export class NzTestRadioGroupFormComponent {
 }
 
 /** https://github.com/NG-ZORRO/ng-zorro-antd/issues/1543 **/
+/** https://github.com/NG-ZORRO/ng-zorro-antd/issues/1734 **/
+
 @Component({
   selector: 'nz-test-radio-group-disabled',
   template: `
     <nz-radio-group [(ngModel)]="value" [nzName]="name" [nzDisabled]="disabled" [nzSize]="size">
       <label nz-radio-button nzValue="A">A</label>
       <label nz-radio-button nzValue="B">B</label>
-      <label nz-radio-button nzValue="C">C</label>
+      <label nz-radio-button nzValue="C" [nzDisabled]="singleDisabled">C</label>
       <label nz-radio-button nzValue="D">D</label>
     </nz-radio-group>`
 })
@@ -356,4 +371,5 @@ export class NzTestRadioGroupDisabledComponent {
   value = 'A';
   disabled = true;
   name: string;
+  singleDisabled = false;
 }