diff --git a/demo/src/ng-api-doc.ts b/demo/src/ng-api-doc.ts
index a328c41683..a3e9fb19e4 100644
--- a/demo/src/ng-api-doc.ts
+++ b/demo/src/ng-api-doc.ts
@@ -207,6 +207,11 @@ export const ngdoc: any = {
"type": "any",
"description": "
Radio button value, will be set to ngModel
\n"
},
+ {
+ "name": "disabled",
+ "type": "boolean",
+ "description": "If true
— radio button is disabled
\n"
+ },
{
"name": "uncheckable",
"type": "boolean",
diff --git a/src/buttons/button-radio.directive.ts b/src/buttons/button-radio.directive.ts
index fca8b336b1..e3370ff848 100644
--- a/src/buttons/button-radio.directive.ts
+++ b/src/buttons/button-radio.directive.ts
@@ -1,7 +1,7 @@
// tslint:disable:no-use-before-declare
import {
ChangeDetectorRef, Directive, ElementRef, forwardRef, HostBinding, HostListener, Input, OnInit,
- Optional
+ Optional, Renderer2
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { ButtonRadioGroupDirective } from './button-radio-group.directive';
@@ -24,6 +24,7 @@ export class ButtonRadioDirective implements ControlValueAccessor, OnInit {
onChange: any = Function.prototype;
onTouched: any = Function.prototype;
private _value: any;
+ private _disabled: boolean;
/** Radio button value, will be set to `ngModel` */
@Input() btnRadio: any;
@@ -42,6 +43,15 @@ export class ButtonRadioDirective implements ControlValueAccessor, OnInit {
}
this._value = value;
}
+ /** If `true` — radio button is disabled */
+ @Input() get disabled(): boolean {
+ return this._disabled;
+ }
+
+ set disabled(disabled: boolean) {
+ this._disabled = disabled;
+ this.setDisabledState(disabled);
+ }
@HostBinding('class.active')
get isActive(): boolean {
@@ -51,7 +61,8 @@ export class ButtonRadioDirective implements ControlValueAccessor, OnInit {
constructor(
private el: ElementRef,
private cdr: ChangeDetectorRef,
- @Optional() private group: ButtonRadioGroupDirective
+ @Optional() private group: ButtonRadioGroupDirective,
+ private renderer: Renderer2
) {}
@HostListener('click')
@@ -61,15 +72,7 @@ export class ButtonRadioDirective implements ControlValueAccessor, OnInit {
}
this.value = this.uncheckable && this.btnRadio === this.value ? undefined : this.btnRadio;
-
- if (this.group) {
- this.group.onTouched();
- this.group.onChange(this.value);
-
- return;
- }
- this.onTouched();
- this.onChange(this.value);
+ this._onChange(this.value);
}
ngOnInit(): void {
@@ -80,6 +83,17 @@ export class ButtonRadioDirective implements ControlValueAccessor, OnInit {
this.onTouched();
}
+ _onChange(value: any): void {
+ if (this.group) {
+ this.group.onTouched();
+ this.group.onChange(value);
+
+ return;
+ }
+ this.onTouched();
+ this.onChange(value);
+ }
+
// ControlValueAccessor
// model -> view
writeValue(value: any): void {
@@ -94,4 +108,13 @@ export class ButtonRadioDirective implements ControlValueAccessor, OnInit {
registerOnTouched(fn: any): void {
this.onTouched = fn;
}
+
+ setDisabledState(disabled: boolean): void {
+ if (disabled) {
+ this.renderer.setAttribute(this.el.nativeElement, 'disabled', 'disabled');
+
+ return;
+ }
+ this.renderer.removeAttribute(this.el.nativeElement, 'disabled');
+ }
}