fix(forms): add (touch) event and [disabled] property for controls (#836)

fixes #804

Author: sis0k0

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,

nativescript-angular/value-accessors/base-value-accessor.ts

@@ -1,10 +1,12 @@
 import { ControlValueAccessor } from "@angular/forms";
+import { View } from "tns-core-modules/ui/core/view";
 
-export class BaseValueAccessor<TView> implements ControlValueAccessor {
-    constructor(public view: TView) { }
-
-    onChange = (_) => { };
+export class BaseValueAccessor<TView extends View> implements ControlValueAccessor {
     private pendingChangeNotification: number = 0;
+    onChange = (_) => { };
+    onTouched = () => {};
+
+    constructor(public view: TView) { }
 
     registerOnChange(fn: (_: any) => void): void {
         this.onChange = (arg) => {
@@ -18,11 +20,13 @@ export class BaseValueAccessor<TView> implements ControlValueAccessor {
         };
     }
 
-    writeValue(_: any) {
-        //
+    registerOnTouched(fn: () => void): void {
+        this.onTouched = fn;
     }
 
-    registerOnTouched(_: () => void): void {
-        //
+    setDisabledState(isDisabled: boolean): void {
+        this.view.isEnabled = !isDisabled;
     }
+
+    writeValue(_: any) { }
 }

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,25 +19,21 @@ 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 = () => { };
-
     constructor(elementRef: ElementRef) {
         super(elementRef.nativeElement);
     }
 
     writeValue(value: any): void {
         this.view.checked = value;
     }
-
-    registerOnTouched(fn: () => void): void { this.onTouched = fn; }
 }

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,25 +19,22 @@ 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 = () => { };
-
     constructor(elementRef: ElementRef) {
         super(elementRef.nativeElement);
     }
 
     writeValue(value: any): void {
         this.view.date = value;
     }
-
-    registerOnTouched(fn: () => void): void { this.onTouched = fn; }
 }

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,25 +19,21 @@ 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 = () => { };
-
     constructor(elementRef: ElementRef) {
         super(elementRef.nativeElement);
     }
 
     writeValue(value: any): void {
         this.view.value = value;
     }
-
-    registerOnTouched(fn: () => void): void { this.onTouched = fn; }
 }

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,18 +21,28 @@ 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]
-})
-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);
-    }
+    selector:
+        "SegmentedBar[ngModel],SegmentedBar[formControlName]," +
+        "segmentedBar[ngModel],segmentedBar[formControlName]," +
+        "segmentedbar[ngModel],segmentedbar[formControlName]," +
+        "segmented-bar[ngModel],segmented-bar[formControlName]," +
 
-    onTouched = () => { };
+        "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
     constructor(elementRef: ElementRef) {
         super(elementRef.nativeElement);
     }
@@ -39,6 +52,7 @@ export class SelectedIndexValueAccessor extends BaseValueAccessor<SelectableView
 
     writeValue(value: any): void {
         this.value = value;
+
         if (this.viewInitialized) {
             this.view.selectedIndex = this.value;
         }
@@ -48,6 +62,4 @@ export class SelectedIndexValueAccessor extends BaseValueAccessor<SelectableView
         this.viewInitialized = true;
         this.view.selectedIndex = this.value;
     }
-
-    registerOnTouched(fn: () => void): void { this.onTouched = fn; }
 }

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,25 +21,33 @@ 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]
-})
-export class TextValueAccessor extends BaseValueAccessor<TextView> { // tslint:disable-line:directive-class-suffix
-    @HostListener("textChange", ["$event"])
-    textChangeListener(event: any) {
-        this.onChange(event.value);
-    }
+    selector:
+        "TextField[ngModel],TextField[formControlName]," +
+        "textField[ngModel],textField[formControlName]," +
+        "textfield[ngModel],textfield[formControlName]," +
+        "text-field[ngModel],text-field[formControlName]," +
 
-    onTouched = () => { };
+        "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)": "onTouched()",
+        "(textChange)": "onChange($event.value)",
+    },
+})
+export class TextValueAccessor extends BaseValueAccessor<TextView> { // tslint:disable-line:directive-class-suffix
     constructor(elementRef: ElementRef) {
         super(elementRef.nativeElement);
     }
 
     writeValue(value: any): void {
         this.view.text = value;
     }
-
-    registerOnTouched(fn: () => void): void { this.onTouched = fn; }
 }

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,25 +19,23 @@ 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);
-    }
-
-    onTouched = () => { };
-
     constructor(elementRef: ElementRef) {
         super(elementRef.nativeElement);
     }
 
     writeValue(value: any): void {
         this.view.time = value;
     }
-
-    registerOnTouched(fn: () => void): void { this.onTouched = fn; }
 }