diff --git a/ionic/components/input/input-base.ts b/ionic/components/input/input-base.ts
index 7130a07def..077f524e4f 100644
--- a/ionic/components/input/input-base.ts
+++ b/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;
}
/**
diff --git a/ionic/components/input/input.scss b/ionic/components/input/input.scss
index 9830b52453..e41563a460 100644
--- a/ionic/components/input/input.scss
+++ b/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;
diff --git a/ionic/components/input/native-input.ts b/ionic/components/input/native-input.ts
index ebfd835ed0..deed803b0b 100644
--- a/ionic/components/input/native-input.ts
+++ b/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
*/
diff --git a/ionic/components/input/test/form-inputs/index.ts b/ionic/components/input/test/form-inputs/index.ts
index 879c86f309..0a4f0fd1e2 100644
--- a/ionic/components/input/test/form-inputs/index.ts
+++ b/ionic/components/input/test/form-inputs/index.ts
@@ -32,4 +32,8 @@ class E2EApp {
this.submitted = true;
}
+ disable() {
+ this.isTextAreaDisabled = !this.isTextAreaDisabled;
+ }
+
}
diff --git a/ionic/components/input/test/form-inputs/main.html b/ionic/components/input/test/form-inputs/main.html
index 00412f55bf..4d4ae2ec2b 100644
--- a/ionic/components/input/test/form-inputs/main.html
+++ b/ionic/components/input/test/form-inputs/main.html
@@ -89,4 +89,18 @@
+
+
+ Disabled Input
+
+
+
+
+ Disabled TextArea
+
+
+
+
+
+