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.