fix(button-toggle): add the setDisabledState from ControlValueAccessor (#2430)

Adds the `setDisabledState` method from the `ControlValueAccessor` interface, which allows the control to be disabled when it is used with the `ReactiveFormsModule`. Also adds a couple of unit tests for the other `ControlValueAccessor` methods.

Author: crisbeto

src/lib/button-toggle/button-toggle.spec.ts

@@ -5,7 +5,7 @@ import {
   ComponentFixture,
   TestBed,
 } from '@angular/core/testing';
-import {NgControl, FormsModule} from '@angular/forms';
+import {NgControl, FormsModule, ReactiveFormsModule, FormControl} from '@angular/forms';
 import {Component, DebugElement} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {
@@ -20,12 +20,13 @@ describe('MdButtonToggle', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MdButtonToggleModule.forRoot(), FormsModule],
+      imports: [MdButtonToggleModule.forRoot(), FormsModule, ReactiveFormsModule],
       declarations: [
         ButtonTogglesInsideButtonToggleGroup,
         ButtonToggleGroupWithNgModel,
         ButtonTogglesInsideButtonToggleGroupMultiple,
         ButtonToggleGroupWithInitialValue,
+        ButtonToggleGroupWithFormControl,
         StandaloneButtonToggle,
       ],
     });
@@ -464,6 +465,52 @@ describe('MdButtonToggle', () => {
 
   });
 
+  describe('using FormControl', () => {
+    let fixture: ComponentFixture<ButtonToggleGroupWithFormControl>;
+    let groupDebugElement: DebugElement;
+    let groupInstance: MdButtonToggleGroup;
+    let testComponent: ButtonToggleGroupWithFormControl;
+
+    beforeEach(async(() => {
+      fixture = TestBed.createComponent(ButtonToggleGroupWithFormControl);
+      fixture.detectChanges();
+
+      testComponent = fixture.debugElement.componentInstance;
+
+      groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroup));
+      groupInstance = groupDebugElement.injector.get(MdButtonToggleGroup);
+    }));
+
+    it('should toggle the disabled state', () => {
+      testComponent.control.disable();
+
+      expect(groupInstance.disabled).toBe(true);
+
+      testComponent.control.enable();
+
+      expect(groupInstance.disabled).toBe(false);
+    });
+
+    it('should set the value', () => {
+      testComponent.control.setValue('green');
+
+      expect(groupInstance.value).toBe('green');
+
+      testComponent.control.setValue('red');
+
+      expect(groupInstance.value).toBe('red');
+    });
+
+    it('should register the on change callback', () => {
+      let spy = jasmine.createSpy('onChange callback');
+
+      testComponent.control.registerOnChange(spy);
+      testComponent.control.setValue('blue');
+
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+
   describe('as standalone', () => {
     let fixture: ComponentFixture<StandaloneButtonToggle>;
     let buttonToggleDebugElement: DebugElement;
@@ -598,3 +645,16 @@ class StandaloneButtonToggle { }
 class ButtonToggleGroupWithInitialValue {
   lastEvent: MdButtonToggleChange;
 }
+
+@Component({
+  template: `
+  <md-button-toggle-group [formControl]="control">
+    <md-button-toggle value="red">Value Red</md-button-toggle>
+    <md-button-toggle value="green">Value Green</md-button-toggle>
+    <md-button-toggle value="blue">Value Blue</md-button-toggle>
+  </md-button-toggle-group>
+  `
+})
+class ButtonToggleGroupWithFormControl {
+  control = new FormControl();
+}

src/lib/button-toggle/button-toggle.ts

@@ -229,6 +229,14 @@ export class MdButtonToggleGroup implements AfterViewInit, ControlValueAccessor
   registerOnTouched(fn: any) {
     this.onTouched = fn;
   }
+
+  /**
+   * Toggles the disabled state of the component. Implemented as part of ControlValueAccessor.
+   * @param isDisabled Whether the component should be disabled.
+   */
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
 }
 
 /** Multiple selection button-toggle group. `ngModel` is not supported in this mode. */