fix(input): disable underline with reactive forms (#2565)

Closes #2558

Author: kara

src/demo-app/input/input-container-demo.html

@@ -253,7 +253,15 @@ <h4>Textarea</h4>
   <md-toolbar color="primary">Forms</md-toolbar>
   <md-card-content>
     <md-input-container><input mdInput placeholder="reactive" [formControl]="formControl"></md-input-container>
-    <md-input-container><input mdInput placeholder="template" [(ngModel)]="model" required></md-input-container>
+    <md-input-container>
+      <input mdInput placeholder="template" [(ngModel)]="model" required [disabled]="ctrlDisabled">
+    </md-input-container>
+    <button md-raised-button color="primary" (click)="formControl.enabled ? formControl.disable() : formControl.enable()">
+      DISABLE REACTIVE CTRL
+    </button>
+    <button md-raised-button color="primary" (click)="ctrlDisabled = !ctrlDisabled">
+      DISABLE TD CTRL
+    </button>
   </md-card-content>
 </md-card>
 

src/demo-app/input/input-container-demo.ts

@@ -14,6 +14,8 @@ export class InputContainerDemo {
   dividerColor: boolean;
   requiredField: boolean;
   floatingLabel: boolean;
+  ctrlDisabled = false;
+
   name: string;
   items: any[] = [
     { value: 10 },

src/lib/input/input-container.spec.ts

@@ -332,22 +332,43 @@ describe('MdInputContainer', function () {
   });
 
   it('supports the disabled attribute as binding', async(() => {
-    let fixture = TestBed.createComponent(MdInputContainerWithDisabled);
+    const fixture = TestBed.createComponent(MdInputContainerWithDisabled);
     fixture.detectChanges();
 
-    let underlineEl = fixture.debugElement.query(By.css('.md-input-underline')).nativeElement;
-    let inputEl = fixture.debugElement.query(By.css('input')).nativeElement;
+    const underlineEl = fixture.debugElement.query(By.css('.md-input-underline')).nativeElement;
+    const inputEl = fixture.debugElement.query(By.css('input')).nativeElement;
 
-    expect(underlineEl.classList.contains('md-disabled')).toBe(false, 'should not be disabled');
+    expect(underlineEl.classList.contains('md-disabled'))
+        .toBe(false, `Expected underline not to start out disabled.`);
     expect(inputEl.disabled).toBe(false);
 
     fixture.componentInstance.disabled = true;
     fixture.detectChanges();
 
+    expect(underlineEl.classList.contains('md-disabled'))
+        .toBe(true, `Expected underline to look disabled after property is set.`);
     expect(inputEl.disabled).toBe(true);
-    expect(underlineEl.classList.contains('md-disabled')).toBe(true, 'should be disabled');
   }));
 
+  it('should display disabled styles when using FormControl.disable()', () => {
+    const fixture = TestBed.createComponent(MdInputContainerWithFormControl);
+    fixture.detectChanges();
+
+    const underlineEl = fixture.debugElement.query(By.css('.md-input-underline')).nativeElement;
+    const inputEl = fixture.debugElement.query(By.css('input')).nativeElement;
+
+    expect(underlineEl.classList)
+        .not.toContain('md-disabled', `Expected underline not to start out disabled.`);
+    expect(inputEl.disabled).toBe(false);
+
+    fixture.componentInstance.formControl.disable();
+    fixture.detectChanges();
+
+    expect(underlineEl.classList)
+        .toContain('md-disabled', `Expected underline to look disabled after disable() is called.`);
+    expect(inputEl.disabled).toBe(true);
+  });
+
   it('supports the required attribute as binding', async(() => {
     let fixture = TestBed.createComponent(MdInputContainerWithRequired);
     fixture.detectChanges();

src/lib/input/input-container.ts

@@ -101,8 +101,13 @@ export class MdInputDirective {
 
   /** Whether the element is disabled. */
   @Input()
-  get disabled() { return this._disabled; }
-  set disabled(value: any) { this._disabled = coerceBooleanProperty(value); }
+  get disabled() {
+    return this._ngControl ? this._ngControl.disabled : this._disabled;
+  }
+
+  set disabled(value: any) {
+    this._disabled = coerceBooleanProperty(value);
+  }
 
   /** Unique id of the element. */
   @Input()