fix(radio): add setDisabledState hook (#2717)

src/framework/theme/components/radio/radio-group.component.ts

@@ -180,6 +180,10 @@ export class NbRadioGroupComponent implements AfterContentInit, OnDestroy, Contr
  this.value = value;
  }
 
+ setDisabledState(isDisabled: boolean): void {
+ this.disabled = isDisabled;
+ }
+
  protected updateAndSubscribeToRadios() {
  this.updateValueFromCheckedOption();
  this.updateNames();

src/framework/theme/components/radio/radio.spec.ts

@@ -16,6 +16,7 @@ import {
  ViewChild,
  ViewChildren,
 } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import createSpy = jasmine.createSpy;
 
@@ -69,6 +70,19 @@ export class NbTwoRadioGroupsComponent {
  @ViewChildren(NbRadioComponent, { read: ElementRef }) radios: QueryList<ElementRef>;
 }
 
+@Component({
+ template: `
+ <nb-radio-group name="1" [formControl]="control">
+ <nb-radio value="1"></nb-radio>
+ <nb-radio value="2"></nb-radio>
+ </nb-radio-group>
+ `,
+})
+export class NbFormsIntegrationComponent {
+ @ViewChild(NbRadioGroupComponent) radioGroup: NbRadioGroupComponent;
+ control = new FormControl({ value: '1', disabled: true})
+}
+
 describe('radio', () => {
  let fixture: ComponentFixture<NbRadioTestComponent>;
  let comp: NbRadioTestComponent;
@@ -106,8 +120,8 @@ describe('NbRadioGroupComponent', () => {
 
  beforeEach(fakeAsync(() => {
  TestBed.configureTestingModule({
- imports: [ NbThemeModule.forRoot(), NbRadioModule ],
- declarations: [ NbRadioWithDynamicValuesTestComponent, NbTwoRadioGroupsComponent ],
+ imports: [ NbThemeModule.forRoot(), NbRadioModule, ReactiveFormsModule ],
+ declarations: [ NbRadioWithDynamicValuesTestComponent, NbTwoRadioGroupsComponent, NbFormsIntegrationComponent ],
  providers: [ { provide: NB_DOCUMENT, useValue: document } ],
  });
 
@@ -288,4 +302,14 @@ describe('NbRadioGroupComponent', () => {
  expect(secondGroup.radios.first.checked).toEqual(true);
  expect(radioFromSecondGroup.checked).toEqual(true);
  });
+
+ it('should disable radio group if form control is disabled', fakeAsync(() => {
+ const radioFixture = TestBed.createComponent(NbFormsIntegrationComponent);
+ radioFixture.detectChanges();
+
+ const { radioGroup } = radioFixture.componentInstance;
+ tick();
+
+ expect(radioGroup.radios.first.disabled).toEqual(true);
+ }));
 });

src/playground/with-layout/radio/radio-disabled-group.component.ts

@@ -1,8 +1,12 @@
 import { Component } from '@angular/core';
+import { FormControl } from '@angular/forms';
 
 @Component({
  template: `
  <nb-card>
+ <nb-card-header>
+ Attribute
+ </nb-card-header>
  <nb-card-body>
  <nb-radio-group disabled name="disabled" value="This is value 1">
  <nb-radio *ngFor="let option of options" [value]="option.value">
@@ -11,6 +15,18 @@ import { Component } from '@angular/core';
  </nb-radio-group>
  </nb-card-body>
  </nb-card>
+ <nb-card>
+ <nb-card-header>
+ Reactive forms
+ </nb-card-header>
+ <nb-card-body>
+ <nb-radio-group [formControl]="formControl">
+ <nb-radio *ngFor="let option of options" [value]="option.value">
+ {{ option.label }}
+ </nb-radio>
+ </nb-radio-group>
+ </nb-card-body>
+ </nb-card>
  `,
 })
 export class RadioDisabledGroupComponent {
@@ -21,4 +37,9 @@ export class RadioDisabledGroupComponent {
  { value: 'This is value 4', label: 'Option 4' },
  { value: 'This is value 5', label: 'Option 5' },
  ];
+
+ formControl = new FormControl({
+ value: 'This is value 1',
+ disabled: true,
+ });
 }

src/playground/with-layout/radio/radio.module.ts

@@ -6,7 +6,7 @@
 
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NbCardModule, NbRadioModule } from '@nebular/theme';
 import { RadioRoutingModule } from './radio-routing.module';
 import { RadioDisabledComponent } from './radio-disabled.component';
@@ -25,6 +25,7 @@ import { RadioDisabledGroupComponent } from './radio-disabled-group.component';
  imports: [
  CommonModule,
  FormsModule,
+ ReactiveFormsModule,
  NbRadioModule,
  NbCardModule,
  RadioRoutingModule,