fix(input): show clear-input on inputs with ngModel/formControlName

fixes #9077
ionic-team · Jan 23, 2017 · 7a6ba2d · 7a6ba2d
1 parent 2ee05b8
commit 7a6ba2d
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 0 deletions.
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
@@ -301,6 +301,7 @@ export class TextInput extends Ion implements IonicFormInput {
 
     nativeInput.valueChange.subscribe((inputValue: any) => {
       this.onChange(inputValue);
+      this.checkHasValue(inputValue);
     });
 
     nativeInput.keydown.subscribe((inputValue: any) => {

diff --git a/src/components/input/test/clear-input/app.module.ts b/src/components/input/test/clear-input/app.module.ts
@@ -1,13 +1,23 @@
 import { Component, NgModule } from '@angular/core';
+import { FormBuilder, Validators } from '@angular/forms';
+
 import { IonicApp, IonicModule } from '../../../../../ionic-angular';
 
 
 @Component({
   templateUrl: 'main.html'
 })
 export class E2EPage {
+  userForm: any;
   myValue = 'really long value that overflows to show padding';
 
+  constructor(fb: FormBuilder) {
+    this.userForm = fb.group({
+      username: [{value: '', disabled: false}, Validators.required],
+      password: [{value: '', disabled: false}, Validators.required],
+    });
+  }
+
   clicked() {
     console.log('clicked button');
   }

diff --git a/src/components/input/test/clear-input/main.html b/src/components/input/test/clear-input/main.html
@@ -16,6 +16,11 @@
       <ion-input class="e2eClearInput" [(ngModel)]="myValue"></ion-input>
     </ion-item>
 
+    <ion-item>
+      <ion-label>Input Clear No ngModel:</ion-label>
+      <ion-input clearInput></ion-input>
+    </ion-item>
+
     <ion-item>
       <ion-label>Input Clear:</ion-label>
       <ion-input class="e2eClearInput" [(ngModel)]="myValue" clearInput></ion-input>
@@ -33,4 +38,20 @@
     </ion-item>
   </ion-list>
 
+  <form [formGroup]="userForm">
+    <ion-list>
+      <ion-list-header>
+        Form w/ clearInput
+      </ion-list-header>
+      <ion-item>
+        <ion-label floating>Username</ion-label>
+        <ion-input formControlName="username" clearInput></ion-input>
+      </ion-item>
+      <ion-item>
+        <ion-label floating>Password</ion-label>
+        <ion-input type="password" formControlName="password" clearInput></ion-input>
+      </ion-item>
+    </ion-list>
+  </form>
+
 </ion-content>