diff --git a/ionic/components/input/input-base.ts b/ionic/components/input/input-base.ts
index 077f524e4f..b620436e9a 100644
--- a/ionic/components/input/input-base.ts
+++ b/ionic/components/input/input-base.ts
@@ -8,7 +8,7 @@ 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 {pointerCoord, hasPointerMoved, closest, copyInputAttributes} from '../../util/dom';
import {NavController} from '../nav/nav-controller';
import {NativeInput, NextInput} from './native-input';
import {Platform} from '../../platform/platform';
@@ -132,7 +132,7 @@ export class InputBase {
if (val) {
val = val.toLowerCase();
- if (/password|email|number|search|tel|url|date|datetime|datetime-local|month|time|week/.test(val)) {
+ if (/password|email|number|search|tel|url|date|month|time|week/.test(val)) {
this._type = val;
}
}
@@ -175,6 +175,9 @@ export class InputBase {
this.checkHasValue(nativeInput.getValue());
this.disabled = this._disabled;
+
+ // copy ion-input attributes to the native input element
+ copyInputAttributes(this._elementRef.nativeElement, nativeInput.element());
}
/**
diff --git a/ionic/components/input/native-input.ts b/ionic/components/input/native-input.ts
index deed803b0b..8f7ab414d2 100644
--- a/ionic/components/input/native-input.ts
+++ b/ionic/components/input/native-input.ts
@@ -127,7 +127,7 @@ export class NativeInput {
/**
* @private
*/
- private element(): HTMLInputElement {
+ element(): HTMLInputElement {
return this._elementRef.nativeElement;
}
diff --git a/ionic/components/input/test/form-inputs/main.html b/ionic/components/input/test/form-inputs/main.html
index 4d4ae2ec2b..a4f9b57091 100644
--- a/ionic/components/input/test/form-inputs/main.html
+++ b/ionic/components/input/test/form-inputs/main.html
@@ -90,6 +90,17 @@
+
+ Custom Attrs
+
+
+
Disabled Input
diff --git a/ionic/util/dom.ts b/ionic/util/dom.ts
index c3620abcc6..bbeb4e0e34 100644
--- a/ionic/util/dom.ts
+++ b/ionic/util/dom.ts
@@ -198,6 +198,20 @@ export function hasFocusedTextInput() {
return false;
}
+const skipInputAttrsReg = /^(value|checked|disabled|type|class|style|id)$/i
+export function copyInputAttributes(srcElement, destElement) {
+ // copy attributes from one element to another
+ // however, skip over a few of them as they're already
+ // handled in the angular world
+ let attrs = srcElement.attributes;
+ for (let i = 0; i < attrs.length; i++) {
+ var attr = attrs[i];
+ if (!skipInputAttrsReg.test(attr.name)) {
+ destElement.setAttribute(attr.name, attr.value);
+ }
+ }
+}
+
let matchesFn: string;
let matchesMethods: Array = ['matches','webkitMatchesSelector','mozMatchesSelector','msMatchesSelector'];
matchesMethods.some((fn: string) => {