feat(input): add max, min, step as inputs and pass to native

closes #10189

Author: brandyscarney

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) {

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);
   }

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({

src/components/input/test/floating-labels/main.html

@@ -30,8 +30,9 @@
     </ion-item>
 
     <ion-item>
-      <ion-label floating>Enter Number: {{ numberInput.value }} </ion-label>
-      <ion-input #numberInput type="number"></ion-input>
+      <ion-label floating>value: {{ numberInput.value }} min: {{ minValue }} max: {{ maxValue }} step: {{ stepValue }} </ion-label>
+      <ion-input #numberInput [min]="minValue" [max]="maxValue" [step]="stepValue" type="number"></ion-input>
+      <button item-right outline ion-button (click)="toggleValues()">Toggle</button>
     </ion-item>
 
     <ion-item>