fix(module:radio): fix nzDisabled in radio-group (#1574)

close #1543
NG-ZORRO · Jun 1, 2018 · 024c488 · 024c488
1 parent ebd5555
commit 024c488
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 4 deletions.
diff --git a/components/radio/nz-radio-group.component.ts b/components/radio/nz-radio-group.component.ts
@@ -53,9 +53,7 @@ export class NzRadioGroupComponent implements AfterContentInit, ControlValueAcce
   @Input()
   set nzDisabled(value: boolean) {
     this._disabled = value;
-    this.radios.forEach((radio) => {
-      radio.nzDisabled = this.nzDisabled;
-    });
+    this.updateDisabledState();
   }
 
   get nzDisabled(): boolean {
@@ -72,6 +70,12 @@ export class NzRadioGroupComponent implements AfterContentInit, ControlValueAcce
     return this._name;
   }
 
+  updateDisabledState(): void {
+    this.radios.forEach((radio) => {
+      radio.nzDisabled = this.nzDisabled;
+    });
+  }
+
   updateChildrenName(): void {
     if (this.nzName) {
       this.radios.forEach((item) => {
@@ -120,6 +124,7 @@ export class NzRadioGroupComponent implements AfterContentInit, ControlValueAcce
   ngAfterContentInit(): void {
     this.syncCheckedValue();
     this.updateChildrenName();
+    this.updateDisabledState();
   }
 
   writeValue(value: string): void {

diff --git a/components/radio/nz-radio.spec.ts b/components/radio/nz-radio.spec.ts
@@ -12,7 +12,7 @@ describe('radio', () => {
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
       imports     : [ NzRadioModule, FormsModule, ReactiveFormsModule ],
-      declarations: [ NzTestRadioSingleComponent, NzTestRadioButtonComponent, NzTestRadioGroupComponent, NzTestRadioFormComponent, NzTestRadioGroupFormComponent ]
+      declarations: [ NzTestRadioSingleComponent, NzTestRadioButtonComponent, NzTestRadioGroupComponent, NzTestRadioFormComponent, NzTestRadioGroupFormComponent, NzTestRadioGroupDisabledComponent ]
     });
     TestBed.compileComponents();
   }));
@@ -155,6 +155,29 @@ describe('radio', () => {
       expect(radios.every(radio => radio.nativeElement.querySelector('input').name === 'test')).toBe(true);
     });
   });
+  describe('radio group disabled', () => {
+    let fixture;
+    let testComponent;
+    let radios;
+    let radioGroup;
+    beforeEach(() => {
+      fixture = TestBed.createComponent(NzTestRadioGroupDisabledComponent);
+      fixture.detectChanges();
+      testComponent = fixture.debugElement.componentInstance;
+      radios = fixture.debugElement.queryAll(By.directive(NzRadioButtonComponent));
+      radioGroup = fixture.debugElement.query(By.directive(NzRadioGroupComponent));
+    });
+    it('should disable work', fakeAsync(() => {
+      fixture.detectChanges();
+      expect(testComponent.value).toBe('A');
+      radios[ 1 ].nativeElement.click();
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+      expect(radios[ 1 ].nativeElement.firstElementChild.classList).not.toContain('ant-radio-button-checked');
+      expect(testComponent.value).toBe('A');
+    }));
+  });
   describe('radio form', () => {
     let fixture;
     let testComponent;
@@ -315,3 +338,22 @@ export class NzTestRadioGroupFormComponent {
     this.formGroup.disable();
   }
 }
+
+/** https://github.com/NG-ZORRO/ng-zorro-antd/issues/1543 **/
+@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="D">D</label>
+    </nz-radio-group>`
+})
+
+export class NzTestRadioGroupDisabledComponent {
+  size = 'default';
+  value = 'A';
+  disabled = true;
+  name: string;
+}