fix(input): pass disabled down to input when it is set from form

brandyscarney · adamdbradley · commit 5844a83343c4 · 2017-01-13T10:45:00.000-06:00
- test modified to disable username and comments on `input/form-inputs` and then toggle them via a button see: http://g.recordit.co/RkN510TcHk.gif fixes ionic-team#9834
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
@@ -80,8 +80,8 @@ import { Platform } from '../../platform/platform';
 @Component({
   selector: 'ion-input,ion-textarea',
   template:
-    '<input [(ngModel)]="_value" [type]="type" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" [placeholder]="placeholder" class="text-input" [ngClass]="\'text-input-\' + _mode" *ngIf="_type!==\'textarea\'"  #input>' +
-    '<textarea [(ngModel)]="_value" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" [placeholder]="placeholder" class="text-input" [ngClass]="\'text-input-\' + _mode" *ngIf="_type===\'textarea\'" #textarea></textarea>' +
+    '<input [(ngModel)]="_value" [type]="type" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" [placeholder]="placeholder" [disabled]="disabled" class="text-input" [ngClass]="\'text-input-\' + _mode" *ngIf="_type!==\'textarea\'"  #input>' +
+    '<textarea [(ngModel)]="_value" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" [placeholder]="placeholder" [disabled]="disabled" class="text-input" [ngClass]="\'text-input-\' + _mode" *ngIf="_type===\'textarea\'" #textarea></textarea>' +
     '<input [type]="type" aria-hidden="true" next-input *ngIf="_useAssist">' +
     '<button ion-button clear [hidden]="!clearInput" type="button" class="text-input-clear-icon" (click)="clearTextInput()" (mousedown)="clearTextInput()"></button>' +
     '<div (touchstart)="pointerStart($event)" (touchend)="pointerEnd($event)" (mousedown)="pointerStart($event)" (mouseup)="pointerEnd($event)" class="input-cover" tappable *ngIf="_useAssist"></div>',
@@ -120,7 +120,7 @@ export class TextInput extends Ion implements IonicFormInput {
     @Optional() private _content: Content,
     @Optional() private _item: Item,
     @Optional() nav: NavController,
-    @Optional() ngControl: NgControl,
+    @Optional() public ngControl: NgControl,
     private _dom: DomController
   ) {
     super(config, elementRef, renderer, 'input');
@@ -212,7 +212,7 @@ export class TextInput extends Ion implements IonicFormInput {
    */
   @Input()
   get disabled() {
-    return this._disabled;
+    return this.ngControl ? this.ngControl.disabled : this._disabled;
   }
   set disabled(val: boolean) {
     this.setDisabled(this._disabled = isTrueProperty(val));
@@ -293,6 +293,7 @@ export class TextInput extends Ion implements IonicFormInput {
   setNativeInput(nativeInput: NativeInput) {
     this._native = nativeInput;
     nativeInput.setValue(this._value);
+    nativeInput.isDisabled(this.disabled);
 
     if (this._item && this._item.labelId !== null) {
       nativeInput.labelledBy(this._item.labelId);
diff --git a/src/components/input/test/form-inputs/app-module.ts b/src/components/input/test/form-inputs/app-module.ts
@@ -18,11 +18,6 @@ export class E2EPage {
     comments: ''
   };
 
-  user = {
-    username: 'asdf',
-    password: '82'
-  };
-
   submitted: boolean = false;
   isTextAreaDisabled: boolean;
 
@@ -39,8 +34,10 @@ export class E2EPage {
     });
 
     this.userForm = fb.group({
-      username: ['', Validators.required],
-      password: ['', Validators.required],
+      email: ['', Validators.required],
+      username: [{value: 'administrator', disabled: true}, Validators.required],
+      password: [{value: 'password', disabled: false}, Validators.required],
+      comments: [{value: 'Comments are disabled', disabled: true}, Validators.required]
     });
   }
 
@@ -52,7 +49,7 @@ export class E2EPage {
     }
   }
 
-  submit(ev: UIEvent, value: any) {
+  submit(ev: UIEvent, value?: any) {
     console.log('Submitted', value);
     this.submitted = true;
   }
@@ -61,6 +58,14 @@ export class E2EPage {
     this.isTextAreaDisabled = !this.isTextAreaDisabled;
   }
 
+  toggleDisable() {
+    let userNameCtrl = this.userForm.get('username');
+    userNameCtrl.enabled ? userNameCtrl.disable() : userNameCtrl.enable();
+
+    let commentsCtrl = this.userForm.get('comments');
+    commentsCtrl.enabled ? commentsCtrl.disable() : commentsCtrl.enable();
+  }
+
 }
 
 @Component({
diff --git a/src/components/input/test/form-inputs/main.html b/src/components/input/test/form-inputs/main.html
@@ -54,24 +54,38 @@
     </ion-list>
   </form>
 
-  <form [formGroup]="userForm" (ngSubmit)="submit($event, user)" #lf="ngForm">
+  <form [formGroup]="userForm" (ngSubmit)="submit($event, userForm)" #lf="ngForm">
     <ion-list>
+      <ion-list-header>
+        Form w/ disabled inputs
+      </ion-list-header>
+      <ion-item>
+        <ion-label floating>Email</ion-label>
+        <ion-input type="email" formControlName="email"></ion-input>
+      </ion-item>
       <ion-item>
         <ion-label floating>Username</ion-label>
-        <ion-input [(ngModel)]="user.username" formControlName="username" required></ion-input>
+        <ion-input formControlName="username"></ion-input>
       </ion-item>
       <ion-item>
         <ion-label floating>Password</ion-label>
-        <ion-input type="password" [(ngModel)]="user.password" formControlName="password" required></ion-input>
+        <ion-input type="password" formControlName="password"></ion-input>
+      </ion-item>
+      <ion-item>
+        <ion-label floating>Comments</ion-label>
+        <ion-textarea formControlName="comments"></ion-textarea>
       </ion-item>
       <div padding-left padding-right>
         <button ion-button block type="submit">Login</button>
+        <button ion-button block type="button" color="secondary" (click)="toggleDisable()">Disable (toggle)</button>
       </div>
       <div padding-left>
         <b>Valid form?:</b> {{ lf.form.valid }}<br>
         <b>Submitted form?:</b> {{ submitted }}<br>
-        <b>Username:</b> {{ user.username }}<br>
-        <b>Password:</b> {{ user.password }}<br>
+        <b>Email:</b> {{ userForm.controls.email.value }}<br>
+        <b>Username:</b> {{ userForm.controls.username.value }}<br>
+        <b>Password:</b> {{ userForm.controls.password.value }}<br>
+        <b>Comments:</b> {{ userForm.controls.comments.value }}<br>
       </div>
     </ion-list>
   </form>
