Skip to content

Commit

Permalink
fix(input): disable underline with reactive forms (#2565)
Browse files Browse the repository at this point in the history
Closes #2558
  • Loading branch information
kara authored and tinayuangao committed Jan 10, 2017
1 parent ac363df commit f9dd34f
Show file tree
Hide file tree
Showing 4 changed files with 44 additions and 8 deletions.
10 changes: 9 additions & 1 deletion src/demo-app/input/input-container-demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
2 changes: 2 additions & 0 deletions src/demo-app/input/input-container-demo.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ export class InputContainerDemo {
dividerColor: boolean;
requiredField: boolean;
floatingLabel: boolean;
ctrlDisabled = false;

name: string;
items: any[] = [
{ value: 10 },
Expand Down
31 changes: 26 additions & 5 deletions src/lib/input/input-container.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
9 changes: 7 additions & 2 deletions src/lib/input/input-container.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down

0 comments on commit f9dd34f

Please sign in to comment.