diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index b6feec63df..5ec3b82be5 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -7,7 +7,7 @@ import { Content, ContentDimensions, ScrollEvent } from '../content/content';
import { copyInputAttributes, PointerCoordinates, hasPointerMoved, pointerCoord } from '../../util/dom';
import { DomController } from '../../platform/dom-controller';
import { Form, IonicFormInput } from '../../util/form';
-import { BaseInput } from '../../util/base-input';
+import { Ion } from '../ion';
import { isString, isTrueProperty } from '../../util/util';
import { Item } from '../item/item';
import { NativeInput } from './native-input';
@@ -91,8 +91,7 @@ import { Platform } from '../../platform/platform';
'
',
encapsulation: ViewEncapsulation.None,
})
-export class TextInput extends BaseInput implements IonicFormInput {
-
+export class TextInput extends Ion implements IonicFormInput {
_autoComplete: string;
_autoCorrect: string;
_autoFocusAssist: string;
@@ -122,17 +121,17 @@ export class TextInput extends BaseInput implements IonicFormInput {
constructor(
config: Config,
private _plt: Platform,
- form: Form,
+ private _form: Form,
private _app: App,
elementRef: ElementRef,
renderer: Renderer,
@Optional() private _content: Content,
- @Optional() item: Item,
+ @Optional() private _item: Item,
@Optional() nav: NavController,
@Optional() public ngControl: NgControl,
private _dom: DomController
) {
- super(config, elementRef, renderer, 'input', '', form, item, ngControl);
+ super(config, elementRef, renderer, 'input');
this._nav = nav;
@@ -148,10 +147,12 @@ export class TextInput extends BaseInput implements IonicFormInput {
}
if (ngControl) {
- // ngControl.valueAccessor = this;
+ ngControl.valueAccessor = this;
this.inputControl = ngControl;
}
+ _form.register(this);
+
// only listen to content scroll events if there is content
if (_content) {
this._scrollStart = _content.ionScrollStart.subscribe((ev: ScrollEvent) => {
@@ -161,6 +162,8 @@ export class TextInput extends BaseInput implements IonicFormInput {
this.scrollHideFocus(ev, false);
});
}
+
+ this.mode = config.get('mode');
}
/**
@@ -179,6 +182,18 @@ export class TextInput extends BaseInput implements IonicFormInput {
this._clearInput = (this._type !== TEXTAREA && isTrueProperty(val));
}
+ /**
+ * @input {string} The text value of the input.
+ */
+ @Input()
+ get value() {
+ return this._value;
+ }
+ set value(val: any) {
+ this._value = val;
+ this.checkHasValue(val);
+ }
+
/**
* @input {string} The type of control to display. The default type is text. Possible values are: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, or `"url"`.
*/
@@ -200,21 +215,31 @@ export class TextInput extends BaseInput implements IonicFormInput {
}
}
+ /**
+ * @input {boolean} If true, the user cannot interact with this element.
+ */
+ @Input()
+ get disabled(): boolean {
+ return this._disabled;
+ }
+ set disabled(val: boolean) {
+ this.setDisabled(this._disabled = isTrueProperty(val));
+ }
+
/**
* @hidden
*/
setDisabled(val: boolean) {
- this.setDisabledState(val);
+ this._renderer.setElementAttribute(this._elementRef.nativeElement, 'disabled', val ? '' : null);
+ this._item && this._item.setElementClass('item-input-disabled', val);
+ this._native && this._native.isDisabled(val);
}
/**
* @hidden
*/
setDisabledState(isDisabled: boolean) {
- this._disabled = isDisabled;
- this._renderer.setElementAttribute(this._elementRef.nativeElement, 'disabled', isDisabled ? '' : null);
- this._item && this._item.setElementClass('item-input-disabled', isDisabled);
- this._native && this._native.isDisabled(isDisabled);
+ this.disabled = isDisabled;
}
/**
@@ -351,7 +376,8 @@ export class TextInput extends BaseInput implements IonicFormInput {
}
nativeInput.valueChange.subscribe((inputValue: any) => {
- this.value = inputValue;
+ this.onChange(inputValue);
+ this.checkHasValue(inputValue);
});
nativeInput.keydown.subscribe((inputValue: any) => {
@@ -361,12 +387,13 @@ export class TextInput extends BaseInput implements IonicFormInput {
this.focusChange(this.hasFocus());
nativeInput.focusChange.subscribe((textInputHasFocus: any) => {
this.focusChange(textInputHasFocus);
- // this.checkHasValue(nativeInput.getValue());
+ this.checkHasValue(nativeInput.getValue());
if (!textInputHasFocus) {
this.onTouched(textInputHasFocus);
}
});
- this.value = nativeInput.getValue();
+
+ this.checkHasValue(nativeInput.getValue());
var ionInputEle: HTMLElement = this._elementRef.nativeElement;
var nativeInputEle: HTMLElement = nativeInput.element();
@@ -529,6 +556,21 @@ export class TextInput extends BaseInput implements IonicFormInput {
this.focus.emit(ev);
}
+ /**
+ * @hidden
+ */
+ writeValue(val: any) {
+ this._value = val;
+ this.checkHasValue(val);
+ }
+
+ /**
+ * @hidden
+ */
+ onChange(val: any) {
+ this.checkHasValue(val);
+ }
+
/**
* @hidden
*/
@@ -559,6 +601,16 @@ export class TextInput extends BaseInput implements IonicFormInput {
return (inputValue !== null && inputValue !== undefined && inputValue !== '');
}
+ /**
+ * @hidden
+ */
+ checkHasValue(inputValue: any) {
+ if (this._item) {
+ var hasValue = (inputValue !== null && inputValue !== undefined && inputValue !== '');
+ this._item.setElementClass('input-has-value', hasValue);
+ }
+ }
+
/**
* @hidden
*/
@@ -670,7 +722,7 @@ export class TextInput extends BaseInput implements IonicFormInput {
* @hidden
*/
ngOnDestroy() {
- super.ngOnDestroy();
+ this._form.deregister(this);
// only stop listening to content scroll events if there is content
if (this._content) {
@@ -684,7 +736,9 @@ export class TextInput extends BaseInput implements IonicFormInput {
*/
clearTextInput() {
console.debug('Should clear input');
- this.value = '';
+ this._value = '';
+ this.onChange(this._value);
+ this.writeValue(this._value);
}
/**
@@ -706,6 +760,23 @@ export class TextInput extends BaseInput implements IonicFormInput {
this._didBlurAfterEdit = false;
}
+ /**
+ * @hidden
+ * Angular2 Forms API method called by the view (formControlName) to register the
+ * onChange event handler that updates the model (Control).
+ * @param {Function} fn the onChange event handler.
+ */
+ registerOnChange(fn: any) { this.onChange = fn; }
+
+ /**
+ * @hidden
+ * Angular2 Forms API method called by the view (formControlName) to register
+ * the onTouched event handler that marks model (Control) as touched.
+ * @param {Function} fn onTouched event handler.
+ */
+ registerOnTouched(fn: any) { this.onTouched = fn; }
+
+
/**
* @hidden
*/