diff --git a/src/demo-app/input/input-container-demo.html b/src/demo-app/input/input-container-demo.html
index dfe2365a8d6a..d72f331ae38b 100644
--- a/src/demo-app/input/input-container-demo.html
+++ b/src/demo-app/input/input-container-demo.html
@@ -253,7 +253,15 @@
Textarea
Forms
-
+
+
+
+
+
diff --git a/src/demo-app/input/input-container-demo.ts b/src/demo-app/input/input-container-demo.ts
index 73e5d3308804..9c702e23ed3e 100644
--- a/src/demo-app/input/input-container-demo.ts
+++ b/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 },
diff --git a/src/lib/input/input-container.spec.ts b/src/lib/input/input-container.spec.ts
index 0632f4bbce45..f59f6d045d9b 100644
--- a/src/lib/input/input-container.spec.ts
+++ b/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();
diff --git a/src/lib/input/input-container.ts b/src/lib/input/input-container.ts
index 3ad5e2737cf5..607c18690043 100644
--- a/src/lib/input/input-container.ts
+++ b/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()