diff --git a/components/radio/nz-radio-group.component.ts b/components/radio/nz-radio-group.component.ts index ba2384b2ff5..380b3b6889f 100644 --- 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 index 836ee1eea1f..b535771e857 100644 --- 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: ` + + + + + + ` +}) + +export class NzTestRadioGroupDisabledComponent { + size = 'default'; + value = 'A'; + disabled = true; + name: string; +}