diff --git a/src/lib/radio/radio.spec.ts b/src/lib/radio/radio.spec.ts index ad921e550014..5bd00772113b 100644 --- a/src/lib/radio/radio.spec.ts +++ b/src/lib/radio/radio.spec.ts @@ -1,6 +1,6 @@ import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing'; import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms'; -import {Component, DebugElement} from '@angular/core'; +import {Component, DebugElement, ViewChild} from '@angular/core'; import {By} from '@angular/platform-browser'; import {dispatchFakeEvent} from '@angular/cdk/testing'; import {defaultRippleAnimationConfig} from '@angular/material/core'; @@ -12,6 +12,7 @@ describe('MatRadio', () => { TestBed.configureTestingModule({ imports: [MatRadioModule, FormsModule, ReactiveFormsModule], declarations: [ + DisableableRadioButton, FocusableRadioButton, RadiosInsideRadioGroup, RadioGroupWithNgModel, @@ -515,6 +516,38 @@ describe('MatRadio', () => { }); }); + describe('disableable', () => { + let fixture: ComponentFixture; + let radioInstance: MatRadioButton; + let radioNativeElement: HTMLInputElement; + let testComponent: DisableableRadioButton; + + beforeEach(() => { + fixture = TestBed.createComponent(DisableableRadioButton); + fixture.detectChanges(); + + testComponent = fixture.debugElement.componentInstance; + const radioDebugElement = fixture.debugElement.query(By.directive(MatRadioButton)); + radioInstance = radioDebugElement.injector.get(MatRadioButton); + radioNativeElement = radioDebugElement.nativeElement.querySelector('input'); + }); + + it('should toggle the disabled state', () => { + expect(radioInstance.disabled).toBeFalsy(); + expect(radioNativeElement.disabled).toBeFalsy(); + + testComponent.disabled = true; + fixture.detectChanges(); + expect(radioInstance.disabled).toBeTruthy(); + expect(radioNativeElement.disabled).toBeTruthy(); + + testComponent.disabled = false; + fixture.detectChanges(); + expect(radioInstance.disabled).toBeFalsy(); + expect(radioNativeElement.disabled).toBeFalsy(); + }); + }); + describe('as standalone', () => { let fixture: ComponentFixture; let radioDebugElements: DebugElement[]; @@ -795,6 +828,17 @@ class RadioGroupWithNgModel { lastEvent: MatRadioChange; } +@Component({ + template: `One` +}) +class DisableableRadioButton { + @ViewChild(MatRadioButton) matRadioButton; + + set disabled(value: boolean) { + this.matRadioButton.disabled = value; + } +} + @Component({ template: ` diff --git a/src/lib/radio/radio.ts b/src/lib/radio/radio.ts index 6676a321cb89..54e00a3c6f5e 100644 --- a/src/lib/radio/radio.ts +++ b/src/lib/radio/radio.ts @@ -410,7 +410,11 @@ export class MatRadioButton extends _MatRadioButtonMixinBase return this._disabled || (this.radioGroup !== null && this.radioGroup.disabled); } set disabled(value: boolean) { - this._disabled = coerceBooleanProperty(value); + const newDisabledState = coerceBooleanProperty(value); + if (this._disabled !== newDisabledState) { + this._disabled = newDisabledState; + this._changeDetector.markForCheck(); + } } /** Whether the radio button is required. */