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 */