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()