fix(input): add/remove disabled on native text input

Close #5280

ionic/components/input/input-base.ts

@@ -6,6 +6,7 @@ import {Content} from '../content/content';
 import {Form} from '../../util/form';
 import {Item} from '../item/item';
 import {IonicApp} from '../app/app';
+import {isTrueProperty} from '../../util/util';
 import {Label} from '../label/label';
 import {pointerCoord, hasPointerMoved, closest}  from '../../util/dom';
 import {NavController} from '../nav/nav-controller';
@@ -16,6 +17,7 @@ import {Platform} from '../../platform/platform';
 export class InputBase {
   protected _coord;
   protected _deregScroll;
+  protected _disabled: boolean = false;
   protected _keyboardHeight;
   protected _scrollMove: EventListener;
   protected _type: string = 'text';
@@ -136,6 +138,17 @@ export class InputBase {
     }
   }
 
+  @Input()
+  get disabled() {
+    return this._disabled;
+  }
+
+  set disabled(val) {
+    this._disabled = isTrueProperty(val);
+    this._item && this._item.setCssClass('item-input-disabled', this._disabled);
+    this._native && this._native.isDisabled(this._disabled);
+  }
+
   /**
    * @private
    */
@@ -161,6 +174,7 @@ export class InputBase {
     });
 
     this.checkHasValue(nativeInput.getValue());
+    this.disabled = this._disabled;
   }
 
   /**

ionic/components/input/input.scss

@@ -38,6 +38,10 @@ textarea.text-input {
   display: block;
 }
 
+.text-input[disabled] {
+  opacity: 0.4;
+}
+
 
 input.text-input:-webkit-autofill {
   background-color: transparent;

ionic/components/input/native-input.ts

@@ -51,6 +51,10 @@ export class NativeInput {
     this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-labelledby', val);
   }
 
+  isDisabled(val: boolean) {
+    this._renderer.setElementAttribute(this._elementRef.nativeElement, 'disabled', val ? '' : null);
+  }
+
   /**
    * @private
    */

ionic/components/input/test/form-inputs/index.ts

@@ -32,4 +32,8 @@ class E2EApp {
     this.submitted = true;
   }
 
+  disable() {
+    this.isTextAreaDisabled = !this.isTextAreaDisabled;
+  }
+
 }

ionic/components/input/test/form-inputs/main.html

@@ -89,4 +89,18 @@
 
   <ion-input placeholder="Stand-alone textarea"></ion-input>
 
+  <ion-list>
+    <ion-item>
+      <ion-label>Disabled Input</ion-label>
+      <ion-input disabled value="Value"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Disabled TextArea</ion-label>
+      <ion-textarea [disabled]="isTextAreaDisabled" value="Value"></ion-textarea>
+    </ion-item>
+  </ion-list>
+
+  <button (click)="disable()">Disable</button>
+
 </ion-content>