Rever input refactor

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';
     '<div (touchstart)="pointerStart($event)" (touchend)="pointerEnd($event)" (mousedown)="pointerStart($event)" (mouseup)="pointerEnd($event)" class="input-cover" tappable *ngIf="_useAssist"></div>',
   encapsulation: ViewEncapsulation.None,
 })
-export class TextInput extends BaseInput<string> implements IonicFormInput {
+export class TextInput extends Ion implements IonicFormInput {
-
   _autoComplete: string;
   _autoCorrect: string;
   _autoFocusAssist: string;
@@ -122,17 +121,17 @@ export class TextInput extends BaseInput<string> 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 = <NavControllerBase>nav;
 
@@ -148,10 +147,12 @@ export class TextInput extends BaseInput<string> 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<string> implements IonicFormInput {
         this.scrollHideFocus(ev, false);
       });
     }
+
+    this.mode = config.get('mode');
   }
 
   /**
@@ -179,6 +182,18 @@ export class TextInput extends BaseInput<string> 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<string> 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.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);
   }
 
   /**
@@ -351,7 +376,8 @@ export class TextInput extends BaseInput<string> 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<string> 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<string> 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<string> 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<string> 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<string> 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<string> 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
    */