diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index dbc0c36c0a..fffc582a40 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -99,6 +99,9 @@ export class TextInput extends Ion implements IonicFormInput {
_readonly: boolean = false;
_isTouch: boolean;
_keyboardHeight: number;
+ _min: any;
+ _max: any;
+ _step: any;
_native: NativeInput;
_nav: NavControllerBase;
_scrollStart: any;
@@ -257,6 +260,60 @@ export class TextInput extends Ion implements IonicFormInput {
this._clearOnEdit = isTrueProperty(val);
}
+ /**
+ * @input {any} The minimum value, which must not be greater than its maximum (max attribute) value.
+ */
+ @Input()
+ get min() {
+ return this._min;
+ }
+ set min(val: any) {
+ this.setMin(this._min = val);
+ }
+
+ /**
+ * @private
+ */
+ setMin(val: any) {
+ this._native && this._native.setMin(val);
+ }
+
+ /**
+ * @input {any} The maximum value, which must not be less than its minimum (min attribute) value.
+ */
+ @Input()
+ get max() {
+ return this._max;
+ }
+ set max(val: any) {
+ this.setMax(this._max = val);
+ }
+
+ /**
+ * @private
+ */
+ setMax(val: any) {
+ this._native && this._native.setMax(val);
+ }
+
+ /**
+ * @input {any} Works with the min and max attributes to limit the increments at which a value can be set.
+ */
+ @Input()
+ get step() {
+ return this._step;
+ }
+ set step(val: any) {
+ this.setStep(this._step = val);
+ }
+
+ /**
+ * @private
+ */
+ setStep(val: any) {
+ this._native && this._native.setStep(val);
+ }
+
/**
* @private
*/
@@ -305,6 +362,9 @@ export class TextInput extends Ion implements IonicFormInput {
setNativeInput(nativeInput: NativeInput) {
this._native = nativeInput;
nativeInput.setValue(this._value);
+ nativeInput.setMin(this._min);
+ nativeInput.setMax(this._max);
+ nativeInput.setStep(this._step);
nativeInput.isDisabled(this.disabled);
if (this._item && this._item.labelId !== null) {
diff --git a/src/components/input/native-input.ts b/src/components/input/native-input.ts
index e1c3a9378c..351432b72c 100644
--- a/src/components/input/native-input.ts
+++ b/src/components/input/native-input.ts
@@ -164,6 +164,18 @@ export class NativeInput {
return this.element().value;
}
+ setMin(val: any) {
+ this._elementRef.nativeElement['min'] = val;
+ }
+
+ setMax(val: any) {
+ this._elementRef.nativeElement['max'] = val;
+ }
+
+ setStep(val: any) {
+ this._elementRef.nativeElement['step'] = val;
+ }
+
setElementClass(cssClass: string, shouldAdd: boolean) {
this._renderer.setElementClass(this._elementRef.nativeElement, cssClass, shouldAdd);
}
diff --git a/src/components/input/test/floating-labels/app.module.ts b/src/components/input/test/floating-labels/app.module.ts
index 371b006a6d..e42cbcceb3 100644
--- a/src/components/input/test/floating-labels/app.module.ts
+++ b/src/components/input/test/floating-labels/app.module.ts
@@ -7,11 +7,20 @@ import { IonicApp, IonicModule } from '../../../../../ionic-angular';
})
export class E2EPage {
myParam = '';
+ minValue = 8;
+ maxValue = 12;
+ stepValue = 2;
myValues = {
value1: 'Dynamic Input',
value2: 'Dynamic Textarea'
};
+
+ toggleValues() {
+ this.minValue === 8 ? this.minValue = 4 : this.minValue = 8;
+ this.maxValue === 12 ? this.maxValue = 20 : this.maxValue = 12;
+ this.stepValue === 2 ? this.stepValue = 4 : this.stepValue = 2;
+ }
}
@Component({
diff --git a/src/components/input/test/floating-labels/main.html b/src/components/input/test/floating-labels/main.html
index cab080976e..5923538a97 100644
--- a/src/components/input/test/floating-labels/main.html
+++ b/src/components/input/test/floating-labels/main.html
@@ -30,8 +30,9 @@
- Enter Number: {{ numberInput.value }}
-
+ value: {{ numberInput.value }} min: {{ minValue }} max: {{ maxValue }} step: {{ stepValue }}
+
+