diff --git a/src/demo-app/input/input-container-demo.html b/src/demo-app/input/input-container-demo.html index 27f10de9a6cf..617a000e5c78 100644 --- a/src/demo-app/input/input-container-demo.html +++ b/src/demo-app/input/input-container-demo.html @@ -249,6 +249,13 @@

Textarea

+ + Forms + + + + + Textarea Autosize diff --git a/src/demo-app/input/input-container-demo.ts b/src/demo-app/input/input-container-demo.ts index cdc3e742064c..73e5d3308804 100644 --- a/src/demo-app/input/input-container-demo.ts +++ b/src/demo-app/input/input-container-demo.ts @@ -1,4 +1,5 @@ import {Component} from '@angular/core'; +import {FormControl, Validators} from '@angular/forms'; let max = 5; @@ -22,6 +23,8 @@ export class InputContainerDemo { { value: 50 }, ]; rows = 8; + formControl = new FormControl('hello', Validators.required); + model = 'hello'; addABunch(n: number) { for (let x = 0; x < n; x++) { diff --git a/src/lib/input/input-container.ts b/src/lib/input/input-container.ts index e50645f90f91..4fedf96e7cd7 100644 --- a/src/lib/input/input-container.ts +++ b/src/lib/input/input-container.ts @@ -135,11 +135,11 @@ export class MdInputDirective implements AfterContentInit { constructor(private _elementRef: ElementRef, private _renderer: Renderer, - @Optional() private _ngControl: NgControl) { + @Optional() public _ngControl: NgControl) { // Force setter to be called in case id was not specified. this.id = this.id; - if (this._ngControl) { + if (this._ngControl && this._ngControl.valueChanges) { this._ngControl.valueChanges.subscribe((value) => { this.value = value; }); @@ -182,6 +182,13 @@ export class MdInputDirective implements AfterContentInit { host: { // Remove align attribute to prevent it from interfering with layout. '[attr.align]': 'null', + '[class.ng-untouched]': '_isUntouched()', + '[class.ng-touched]': '_isTouched()', + '[class.ng-pristine]': '_isPristine()', + '[class.ng-dirty]': '_isDirty()', + '[class.ng-valid]': '_isValid()', + '[class.ng-invalid]': '_isInvalid()', + '[class.ng-pending]': '_isPending()', '(click)': '_focusInput()', }, encapsulation: ViewEncapsulation.None, @@ -223,13 +230,27 @@ export class MdInputContainer implements AfterContentInit { }); } + _isUntouched() { return this._hasNgControl() && this._mdInputChild._ngControl.untouched; } + + _isTouched() { return this._hasNgControl() && this._mdInputChild._ngControl.touched; } + + _isPristine() { return this._hasNgControl() && this._mdInputChild._ngControl.pristine; } + + _isDirty() { return this._hasNgControl() && this._mdInputChild._ngControl.dirty; } + + _isValid() { return this._hasNgControl() && this._mdInputChild._ngControl.valid; } + + _isInvalid() { return this._hasNgControl() && this._mdInputChild._ngControl.invalid; } + + _isPending() { return this._hasNgControl() && this._mdInputChild._ngControl.pending; } + /** Whether the input has a placeholder. */ - _hasPlaceholder(): boolean { - return !!this._mdInputChild.placeholder || !!this._placeholderChild; - } + _hasPlaceholder() { return !!(this._mdInputChild.placeholder || this._placeholderChild); } _focusInput() { this._mdInputChild.focus(); } + private _hasNgControl() { return !!(this._mdInputChild && this._mdInputChild._ngControl); } + /** * Ensure that there is only one placeholder (either `input` attribute or child element with the * `md-placeholder` attribute.