From 11ef8d6aaacd93597273559f207fa16b30e7feb1 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Tue, 27 Dec 2016 21:37:07 +0200
Subject: [PATCH] fix(button-toggle): add the setDisabledState from
 ControlValueAccessor

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.
---
 src/lib/button-toggle/button-toggle.spec.ts | 64 ++++++++++++++++++++-
 src/lib/button-toggle/button-toggle.ts      |  8 +++
 2 files changed, 70 insertions(+), 2 deletions(-)

diff --git a/src/lib/button-toggle/button-toggle.spec.ts b/src/lib/button-toggle/button-toggle.spec.ts
index f06767720f39..c69537db787d 100644
--- a/src/lib/button-toggle/button-toggle.spec.ts
+++ b/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();
+}
diff --git a/src/lib/button-toggle/button-toggle.ts b/src/lib/button-toggle/button-toggle.ts
index 92b6e15b9df4..330da2677a82 100644
--- a/src/lib/button-toggle/button-toggle.ts
+++ b/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. */