fix(forms): add (touch) event for controls

sis0k0 · sis0k0 · commit 4ba0e7c0cf47 · 2017-06-09T02:19:59.000+03:00
fixes #804
diff --git a/nativescript-angular/tslint.json b/nativescript-angular/tslint.json
@@ -7,7 +7,6 @@
     "component-selector": [true, "element", "", "camelCase"],
     "use-input-property-decorator": true,
     "use-output-property-decorator": true,
-    "use-host-property-decorator": true,
     "no-input-rename": true,
     "no-output-rename": true,
     "use-pipe-transform-interface": true,
diff --git a/nativescript-angular/value-accessors/checked-value-accessor.ts b/nativescript-angular/value-accessors/checked-value-accessor.ts
@@ -1,10 +1,13 @@
-import { Directive, ElementRef, forwardRef, HostListener } from "@angular/core";
+import { Directive, ElementRef, forwardRef } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import { BaseValueAccessor } from "./base-value-accessor";
 import { Switch } from "tns-core-modules/ui/switch";
 
-const CHECKED_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => CheckedValueAccessor), multi: true};
+const CHECKED_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => CheckedValueAccessor),
+    multi: true,
+};
 
 /**
  * The accessor for setting a checked property and listening to changes that is used by the
@@ -16,17 +19,18 @@ const CHECKED_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR,
  *  ```
  */
 @Directive({
-    // tslint:disable-next-line:max-line-length directive-selector
-    selector: "Switch[ngModel], Switch[formControlName], switch[ngModel], switch[formControlName], switch[ngModel], switch[formControlName]",
-    providers: [CHECKED_VALUE_ACCESSOR]
+    selector:
+        "Switch[ngModel],Switch[formControlName]," +
+        "switch[ngModel],switch[formControlName]",
+    providers: [CHECKED_VALUE_ACCESSOR],
+    host: {
+        "(touch)": "onTouched()",
+        "(checkedChange)": "onChange($event.value)",
+    },
 })
 export class CheckedValueAccessor extends BaseValueAccessor<Switch> { // tslint:disable-line:directive-class-suffix
-    @HostListener("checkedChange", ["$event"])
-    checkedChangeListener(event: any) {
-        this.onChange(event.value);
-    }
-
-    onTouched = () => { };
+    onChange = (_: any) => {};
+    onTouched = () => {};
 
     constructor(elementRef: ElementRef) {
         super(elementRef.nativeElement);
@@ -36,5 +40,6 @@ export class CheckedValueAccessor extends BaseValueAccessor<Switch> { // tslint:
         this.view.checked = value;
     }
 
+    registerOnChange(fn: (_: any) => {}): void { this.onChange = fn; }
     registerOnTouched(fn: () => void): void { this.onTouched = fn; }
 }
diff --git a/nativescript-angular/value-accessors/date-value-accessor.ts b/nativescript-angular/value-accessors/date-value-accessor.ts
@@ -1,10 +1,13 @@
-import { Directive, ElementRef, forwardRef, HostListener } from "@angular/core";
+import { Directive, ElementRef, forwardRef } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import { BaseValueAccessor } from "./base-value-accessor";
 import { DatePicker } from "tns-core-modules/ui/date-picker";
 
-const DATE_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => DateValueAccessor), multi: true};
+const DATE_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => DateValueAccessor),
+    multi: true,
+};
 
 /**
  * The accessor for setting a date and listening to changes that is used by the
@@ -16,17 +19,19 @@ const DATE_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR,
  *  ```
  */
 @Directive({
-    // tslint:disable-next-line:max-line-length directive-selector
-    selector: "DatePicker[ngModel], DatePicker[formControlName], datePicker[ngModel], datePicker[formControlName], date-picker[ngModel], date-picker[formControlName]",
-    providers: [DATE_VALUE_ACCESSOR]
+    selector: "DatePicker[ngModel],DatePicker[formControlName]," +
+        "datepicker[ngModel],datepicker[formControlName]," +
+        "datePicker[ngModel],datePicker[formControlName]," +
+        "date-picker[ngModel],date-picker[formControlName]",
+    providers: [DATE_VALUE_ACCESSOR],
+    host: {
+        "(touch)": "onTouched()",
+        "(dateChange)": "onChange($event.value)",
+    },
 })
 export class DateValueAccessor extends BaseValueAccessor<DatePicker> { // tslint:disable-line:directive-class-suffix
-    @HostListener("dateChange", ["$event"])
-    dateChangeListener(event: any) {
-        this.onChange(event.value);
-    }
-
-    onTouched = () => { };
+    onChange = (_: any) => {};
+    onTouched = () => {};
 
     constructor(elementRef: ElementRef) {
         super(elementRef.nativeElement);
@@ -36,5 +41,6 @@ export class DateValueAccessor extends BaseValueAccessor<DatePicker> { // tslint
         this.view.date = value;
     }
 
+    registerOnChange(fn: (_: any) => {}): void { this.onChange = fn; }
     registerOnTouched(fn: () => void): void { this.onTouched = fn; }
 }
diff --git a/nativescript-angular/value-accessors/number-value-accessor.ts b/nativescript-angular/value-accessors/number-value-accessor.ts
@@ -1,10 +1,13 @@
-import { Directive, ElementRef, forwardRef, HostListener } from "@angular/core";
+import { Directive, ElementRef, forwardRef } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import { BaseValueAccessor } from "./base-value-accessor";
 import { Slider } from "tns-core-modules/ui/slider";
 
-const NUMBER_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => NumberValueAccessor), multi: true};
+const NUMBER_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => NumberValueAccessor),
+    multi: true,
+};
 
 /**
  * The accessor for setting a value and listening to changes that is used by the
@@ -16,17 +19,18 @@ const NUMBER_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR,
  *  ```
  */
 @Directive({
-    // tslint:disable-next-line:max-line-length directive-selector
-    selector: "Slider[ngModel], Slider[formControlName], slider[ngModel], slider[formControlName], slider[ngModel], slider[formControlName]",
-    providers: [NUMBER_VALUE_ACCESSOR]
+    selector:
+        "Slider[ngModel],Slider[formControlName]," +
+        "slider[ngModel],slider[formControlName]",
+    providers: [NUMBER_VALUE_ACCESSOR],
+    host: {
+        "(touch)": "onTouched()",
+        "(valueChange)": "onChange($event.value)",
+    },
 })
 export class NumberValueAccessor extends BaseValueAccessor<Slider> { // tslint:disable-line:directive-class-suffix
-    @HostListener("valueChange", ["$event"])
-    valueChangeListener(event: any) {
-        this.onChange(event.value);
-    }
-
-    onTouched = () => { };
+    onChange = (_: any) => {};
+    onTouched = () => {};
 
     constructor(elementRef: ElementRef) {
         super(elementRef.nativeElement);
@@ -36,5 +40,6 @@ export class NumberValueAccessor extends BaseValueAccessor<Slider> { // tslint:d
         this.view.value = value;
     }
 
+    registerOnChange(fn: (_: any) => {}): void { this.onChange = fn; }
     registerOnTouched(fn: () => void): void { this.onTouched = fn; }
 }
diff --git a/nativescript-angular/value-accessors/selectedIndex-value-accessor.ts b/nativescript-angular/value-accessors/selectedIndex-value-accessor.ts
@@ -1,10 +1,13 @@
-import { Directive, ElementRef, forwardRef, AfterViewInit, HostListener } from "@angular/core";
+import { Directive, ElementRef, forwardRef, AfterViewInit } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import { BaseValueAccessor } from "./base-value-accessor";
 import { View } from "tns-core-modules/ui/core/view";
 
-const SELECTED_INDEX_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => SelectedIndexValueAccessor), multi: true};
+const SELECTED_INDEX_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => SelectedIndexValueAccessor),
+    multi: true,
+};
 
 export type SelectableView = {selectedIndex: number} & View;
 
@@ -18,17 +21,30 @@ export type SelectableView = {selectedIndex: number} & View;
  *  ```
  */
 @Directive({
-    // tslint:disable-next-line:max-line-length directive-selector
-    selector: "SegmentedBar[ngModel], SegmentedBar[formControlName], segmentedBar[ngModel], segmentedBar[formControlName], segmented-bar[ngModel], segmented-bar[formControlName], ListPicker[ngModel], ListPicker[formControlName], listPicker[ngModel], listPicker[formControlName], list-picker[ngModel], list-picker[formControlName], TabView[ngModel], TabView[formControlName], tabView[ngModel], tabView[formControlName], tab-view[ngModel], tab-view[formControlName]",
-    providers: [SELECTED_INDEX_VALUE_ACCESSOR]
+    selector:
+        "SegmentedBar[ngModel],SegmentedBar[formControlName]," +
+        "segmentedBar[ngModel],segmentedBar[formControlName]," +
+        "segmentedbar[ngModel],segmentedbar[formControlName]," +
+        "segmented-bar[ngModel],segmented-bar[formControlName]," +
+
+        "ListPicker[ngModel],ListPicker[formControlName]," +
+        "listPicker[ngModel],listPicker[formControlName]," +
+        "listpicker[ngModel],listpicker[formControlName]," +
+        "list-picker[ngModel],list-picker[formControlName]," +
+
+        "TabView[ngModel],TabView[formControlName]," +
+        "tabView[ngModel],tabView[formControlName]," +
+        "tabview[ngModel],tabview[formControlName]," +
+        "tab-view[ngModel],tab-view[formControlName]",
+    providers: [SELECTED_INDEX_VALUE_ACCESSOR],
+    host: {
+        "(touch)": "onTouched()",
+        "(selectedIndexChange)": "onChange($event.value)",
+    },
 })
 export class SelectedIndexValueAccessor extends BaseValueAccessor<SelectableView> implements AfterViewInit { // tslint:disable-line:max-line-length directive-class-suffix
-    @HostListener("selectedIndexChange", ["$event"])
-    selectedIndexChangeListener(event: any) {
-        this.onChange(event.value);
-    }
-
-    onTouched = () => { };
+    onChange = (_: any) => {};
+    onTouched = () => {};
 
     constructor(elementRef: ElementRef) {
         super(elementRef.nativeElement);
@@ -49,5 +65,6 @@ export class SelectedIndexValueAccessor extends BaseValueAccessor<SelectableView
         this.view.selectedIndex = this.value;
     }
 
+    registerOnChange(fn: (_: any) => {}): void { this.onChange = fn; }
     registerOnTouched(fn: () => void): void { this.onTouched = fn; }
 }
diff --git a/nativescript-angular/value-accessors/text-value-accessor.ts b/nativescript-angular/value-accessors/text-value-accessor.ts
@@ -1,10 +1,13 @@
-import { Directive, ElementRef, forwardRef, HostListener } from "@angular/core";
+import { Directive, ElementRef, forwardRef } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import { BaseValueAccessor } from "./base-value-accessor";
 import { View } from "tns-core-modules/ui/core/view";
 
-const TEXT_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => TextValueAccessor), multi: true};
+const TEXT_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => TextValueAccessor),
+    multi: true,
+};
 
 export type TextView = {text: string} & View;
 
@@ -18,17 +21,30 @@ export type TextView = {text: string} & View;
  *  ```
  */
 @Directive({
-    // tslint:disable-next-line:max-line-length directive-selector
-    selector: "TextField[ngModel], TextField[formControlName], textField[ngModel], textField[formControlName], text-field[ngModel], text-field[formControlName], TextView[ngModel], TextView[formControlName], textView[ngModel], textView[formControlName], text-view[ngModel], text-view[formControlName], SearchBar[ngModel], SearchBar[formControlName], searchBar[ngModel], searchBar[formControlName], search-bar[ngModel], search-bar[formControlName]",
-    providers: [TEXT_VALUE_ACCESSOR]
+    selector:
+        "TextField[ngModel],TextField[formControlName]," +
+        "textField[ngModel],textField[formControlName]," +
+        "textfield[ngModel],textfield[formControlName]," +
+        "text-field[ngModel],text-field[formControlName]," +
+
+        "TextView[ngModel],TextView[formControlName]," +
+        "textView[ngModel],textView[formControlName]," +
+        "textview[ngModel],textview[formControlName]," +
+        "text-view[ngModel],text-view[formControlName]," +
+
+        "SearchBar[ngModel],SearchBar[formControlName]," +
+        "searchBar[ngModel],searchBar[formControlName]," +
+        "searchbar[ngModel],searchbar[formControlName]," +
+        "search-bar[ngModel], search-bar[formControlName]",
+    providers: [TEXT_VALUE_ACCESSOR],
+    host: {
+        "(touch)": "onTouch()",
+        "(textChange)": "onChange(event.value)",
+    },
 })
 export class TextValueAccessor extends BaseValueAccessor<TextView> { // tslint:disable-line:directive-class-suffix
-    @HostListener("textChange", ["$event"])
-    textChangeListener(event: any) {
-        this.onChange(event.value);
-    }
-
-    onTouched = () => { };
+    onChange = (_: any) => {};
+    onTouched = () => {};
 
     constructor(elementRef: ElementRef) {
         super(elementRef.nativeElement);
@@ -38,5 +54,6 @@ export class TextValueAccessor extends BaseValueAccessor<TextView> { // tslint:d
         this.view.text = value;
     }
 
+    registerOnChange(fn: (_: any) => {}): void { this.onChange = fn; }
     registerOnTouched(fn: () => void): void { this.onTouched = fn; }
 }
diff --git a/nativescript-angular/value-accessors/time-value-accessor.ts b/nativescript-angular/value-accessors/time-value-accessor.ts
@@ -1,10 +1,13 @@
-import { Directive, ElementRef, forwardRef, HostListener } from "@angular/core";
+import { Directive, ElementRef, forwardRef } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import { BaseValueAccessor } from "./base-value-accessor";
 import { TimePicker } from "tns-core-modules/ui/time-picker";
 
-const TIME_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => TimeValueAccessor), multi: true};
+const TIME_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => TimeValueAccessor),
+    multi: true,
+};
 
 /**
  * The accessor for setting a time and listening to changes that is used by the
@@ -16,16 +19,19 @@ const TIME_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR,
  *  ```
  */
 @Directive({
-    // tslint:disable-next-line:max-line-length directive-selector
-    selector: "TimePicker[ngModel], TimePicker[formControlName], timePicker[ngModel], timePicker[formControlName], time-picker[ngModel], time-picker[formControlName]",
-    providers: [TIME_VALUE_ACCESSOR]
+    selector:
+        "TimePicker[ngModel],TimePicker[formControlName]," +
+        "timepicker[ngModel],timepicker[formControlName]," +
+        "timePicker[ngModel],timePicker[formControlName]," +
+        "time-picker[ngModel], time-picker[formControlName]",
+    providers: [TIME_VALUE_ACCESSOR],
+    host: {
+        "(touch)": "onTouch()",
+        "(timeChange)": "onChange($event.value)",
+    },
 })
 export class TimeValueAccessor extends BaseValueAccessor<TimePicker> { // tslint:disable-line:directive-class-suffix
-    @HostListener("timeChange", ["$event"])
-    timeChangeListener(event: any) {
-        this.onChange(event.value);
-    }
-
+    onChange = (_: any) => {};
     onTouched = () => { };
 
     constructor(elementRef: ElementRef) {
@@ -36,5 +42,6 @@ export class TimeValueAccessor extends BaseValueAccessor<TimePicker> { // tslint
         this.view.time = value;
     }
 
+    registerOnChange(fn: (_: any) => {}): void { this.onChange = fn; }
     registerOnTouched(fn: () => void): void { this.onTouched = fn; }
 }
