fix(input): pass readonly from ion-input down to native input

also adds to placeholder test an input and textarea with readonly that can be toggled fixes #6408
ionic-team · Jan 23, 2017 · f9a576e · f9a576e
1 parent 7a6ba2d
commit f9a576e
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 5 deletions.
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" [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 [(ngModel)]="_value" [type]="type" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" [placeholder]="placeholder" [disabled]="disabled" [readonly]="readonly" class="text-input" [ngClass]="\'text-input-\' + _mode" *ngIf="_type!==\'textarea\'"  #input>' +
+    '<textarea [(ngModel)]="_value" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" [placeholder]="placeholder" [disabled]="disabled" [readonly]="readonly" 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>',
@@ -96,6 +96,7 @@ export class TextInput extends Ion implements IonicFormInput {
   _coord: PointerCoordinates;
   _didBlurAfterEdit: boolean;
   _disabled: boolean = false;
+  _readonly: boolean = false;
   _isTouch: boolean;
   _keyboardHeight: number;
   _native: NativeInput;
@@ -164,7 +165,7 @@ export class TextInput extends Ion implements IonicFormInput {
   @Input() placeholder: string = '';
 
   /**
-   * @input {bool} A clear icon will appear in the input when there is a value. Clicking it clears the input.
+   * @input {boolean} A clear icon will appear in the input when there is a value. Clicking it clears the input.
    */
   @Input()
   get clearInput() {
@@ -208,7 +209,7 @@ export class TextInput extends Ion implements IonicFormInput {
   }
 
   /**
-   * @input {bool} If the input should be disabled or not
+   * @input {boolean} If the input should be disabled or not
    */
   @Input()
   get disabled() {
@@ -226,6 +227,17 @@ export class TextInput extends Ion implements IonicFormInput {
     this._native && this._native.isDisabled(val);
   }
 
+  /**
+   * @input {boolean} If the input should be readonly or not
+   */
+  @Input()
+  get readonly() {
+    return this._readonly;
+  }
+  set readonly(val: boolean) {
+    this._readonly = isTrueProperty(val);
+  }
+
   /**
    * @input {string} The mode to apply to this component.
    */

diff --git a/src/components/input/test/placeholder-labels/app.module.ts b/src/components/input/test/placeholder-labels/app.module.ts
@@ -5,7 +5,14 @@ import { IonicApp, IonicModule } from '../../../../../ionic-angular';
 @Component({
   templateUrl: 'main.html'
 })
-export class E2EPage {}
+export class E2EPage {
+  isReadonly: boolean = true;
+
+  toggleReadonly() {
+    this.isReadonly = !this.isReadonly;
+  }
+
+}
 
 @Component({
   template: '<ion-nav [root]="rootPage"></ion-nav>'

diff --git a/src/components/input/test/placeholder-labels/main.html b/src/components/input/test/placeholder-labels/main.html
@@ -2,6 +2,9 @@
 
   <ion-toolbar>
     <ion-title>Placeholder Label Text Input</ion-title>
+    <ion-buttons end>
+      <button ion-button (click)="toggleReadonly()">Toggle</button>
+    </ion-buttons>
   </ion-toolbar>
 
 </ion-header>
@@ -19,6 +22,10 @@
       <ion-input placeholder="Text Input Placeholder" value="Text Input Value"></ion-input>
     </ion-item>
 
+    <ion-item>
+      <ion-input placeholder="Text Input Readonly" [readonly]="isReadonly" value="Text Input Readonly"></ion-input>
+    </ion-item>
+
     <ion-item>
       <ion-icon name="call" item-left></ion-icon>
       <ion-input placeholder="Text Input Placeholder"></ion-input>
@@ -37,6 +44,10 @@
       <ion-textarea placeholder="ion-textarea Placeholder" value="Textarea value"></ion-textarea>
     </ion-item>
 
+    <ion-item>
+      <ion-textarea placeholder="ion-textarea Readonly" [readonly]="isReadonly" value="Textarea Readonly"></ion-textarea>
+    </ion-item>
+
   </ion-list>
 
   <ion-list inset>