fix(input): copy input state classes to md-input-container (#2191)

angular · Dec 14, 2016 · f0c4148 · f0c4148
1 parent 78d54fc
commit f0c4148
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 5 deletions.
diff --git a/src/demo-app/input/input-container-demo.html b/src/demo-app/input/input-container-demo.html
@@ -249,6 +249,13 @@ <h4>Textarea</h4>
   </md-card-content>
 </md-card>
 
+<md-card class="demo-card demo-basic">
+  <md-toolbar color="primary">Forms</md-toolbar>
+  <md-card-content>
+    <md-input-container><input md-input placeholder="reactive" [formControl]="formControl"></md-input-container>
+    <md-input-container><input md-input placeholder="template" [(ngModel)]="model" required></md-input-container>
+  </md-card-content>
+</md-card>
 
 <md-card class="demo-card demo-basic">
   <md-toolbar color="primary">Textarea Autosize</md-toolbar>

diff --git 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
@@ -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.