Skip to content

Commit 4ba0e7c

Browse files
sis0k0sis0k0
committed
fix(forms): add (touch) event for controls
fixes #804
1 parent 4521c7c commit 4ba0e7c

7 files changed

Lines changed: 128 additions & 72 deletions

File tree

‎nativescript-angular/tslint.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
"component-selector": [true, "element", "", "camelCase"],
88
"use-input-property-decorator": true,
99
"use-output-property-decorator": true,
10-
"use-host-property-decorator": true,
1110
"no-input-rename": true,
1211
"no-output-rename": true,
1312
"use-pipe-transform-interface": true,

‎nativescript-angular/value-accessors/checked-value-accessor.ts‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1-
import { Directive, ElementRef, forwardRef, HostListener } from "@angular/core";
1+
import { Directive, ElementRef, forwardRef } from "@angular/core";
22
import { NG_VALUE_ACCESSOR } from "@angular/forms";
33
import { BaseValueAccessor } from "./base-value-accessor";
44
import { Switch } from "tns-core-modules/ui/switch";
55

6-
const CHECKED_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR,
7-
useExisting: forwardRef(() => CheckedValueAccessor), multi: true};
6+
const CHECKED_VALUE_ACCESSOR = {
7+
provide: NG_VALUE_ACCESSOR,
8+
useExisting: forwardRef(() => CheckedValueAccessor),
9+
multi: true,
10+
};
811

912
/**
1013
* 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,
1619
* ```
1720
*/
1821
@Directive({
19-
// tslint:disable-next-line:max-line-length directive-selector
20-
selector: "Switch[ngModel], Switch[formControlName], switch[ngModel], switch[formControlName], switch[ngModel], switch[formControlName]",
21-
providers: [CHECKED_VALUE_ACCESSOR]
22+
selector:
23+
"Switch[ngModel],Switch[formControlName]," +
24+
"switch[ngModel],switch[formControlName]",
25+
providers: [CHECKED_VALUE_ACCESSOR],
26+
host: {
27+
"(touch)": "onTouched()",
28+
"(checkedChange)": "onChange($event.value)",
29+
},
2230
})
2331
export class CheckedValueAccessor extends BaseValueAccessor<Switch> { // tslint:disable-line:directive-class-suffix
24-
@HostListener("checkedChange", ["$event"])
25-
checkedChangeListener(event: any) {
26-
this.onChange(event.value);
27-
}
28-
29-
onTouched = () => { };
32+
onChange = (_: any) => {};
33+
onTouched = () => {};
3034

3135
constructor(elementRef: ElementRef) {
3236
super(elementRef.nativeElement);
@@ -36,5 +40,6 @@ export class CheckedValueAccessor extends BaseValueAccessor<Switch> { // tslint:
3640
this.view.checked = value;
3741
}
3842

43+
registerOnChange(fn: (_: any) => {}): void { this.onChange = fn; }
3944
registerOnTouched(fn: () => void): void { this.onTouched = fn; }
4045
}

‎nativescript-angular/value-accessors/date-value-accessor.ts‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1-
import { Directive, ElementRef, forwardRef, HostListener } from "@angular/core";
1+
import { Directive, ElementRef, forwardRef } from "@angular/core";
22
import { NG_VALUE_ACCESSOR } from "@angular/forms";
33
import { BaseValueAccessor } from "./base-value-accessor";
44
import { DatePicker } from "tns-core-modules/ui/date-picker";
55

6-
const DATE_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR,
7-
useExisting: forwardRef(() => DateValueAccessor), multi: true};
6+
const DATE_VALUE_ACCESSOR = {
7+
provide: NG_VALUE_ACCESSOR,
8+
useExisting: forwardRef(() => DateValueAccessor),
9+
multi: true,
10+
};
811

912
/**
1013
* 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,
1619
* ```
1720
*/
1821
@Directive({
19-
// tslint:disable-next-line:max-line-length directive-selector
20-
selector: "DatePicker[ngModel], DatePicker[formControlName], datePicker[ngModel], datePicker[formControlName], date-picker[ngModel], date-picker[formControlName]",
21-
providers: [DATE_VALUE_ACCESSOR]
22+
selector: "DatePicker[ngModel],DatePicker[formControlName]," +
23+
"datepicker[ngModel],datepicker[formControlName]," +
24+
"datePicker[ngModel],datePicker[formControlName]," +
25+
"date-picker[ngModel],date-picker[formControlName]",
26+
providers: [DATE_VALUE_ACCESSOR],
27+
host: {
28+
"(touch)": "onTouched()",
29+
"(dateChange)": "onChange($event.value)",
30+
},
2231
})
2332
export class DateValueAccessor extends BaseValueAccessor<DatePicker> { // tslint:disable-line:directive-class-suffix
24-
@HostListener("dateChange", ["$event"])
25-
dateChangeListener(event: any) {
26-
this.onChange(event.value);
27-
}
28-
29-
onTouched = () => { };
33+
onChange = (_: any) => {};
34+
onTouched = () => {};
3035

3136
constructor(elementRef: ElementRef) {
3237
super(elementRef.nativeElement);
@@ -36,5 +41,6 @@ export class DateValueAccessor extends BaseValueAccessor<DatePicker> { // tslint
3641
this.view.date = value;
3742
}
3843

44+
registerOnChange(fn: (_: any) => {}): void { this.onChange = fn; }
3945
registerOnTouched(fn: () => void): void { this.onTouched = fn; }
4046
}

‎nativescript-angular/value-accessors/number-value-accessor.ts‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1-
import { Directive, ElementRef, forwardRef, HostListener } from "@angular/core";
1+
import { Directive, ElementRef, forwardRef } from "@angular/core";
22
import { NG_VALUE_ACCESSOR } from "@angular/forms";
33
import { BaseValueAccessor } from "./base-value-accessor";
44
import { Slider } from "tns-core-modules/ui/slider";
55

6-
const NUMBER_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR,
7-
useExisting: forwardRef(() => NumberValueAccessor), multi: true};
6+
const NUMBER_VALUE_ACCESSOR = {
7+
provide: NG_VALUE_ACCESSOR,
8+
useExisting: forwardRef(() => NumberValueAccessor),
9+
multi: true,
10+
};
811

912
/**
1013
* 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,
1619
* ```
1720
*/
1821
@Directive({
19-
// tslint:disable-next-line:max-line-length directive-selector
20-
selector: "Slider[ngModel], Slider[formControlName], slider[ngModel], slider[formControlName], slider[ngModel], slider[formControlName]",
21-
providers: [NUMBER_VALUE_ACCESSOR]
22+
selector:
23+
"Slider[ngModel],Slider[formControlName]," +
24+
"slider[ngModel],slider[formControlName]",
25+
providers: [NUMBER_VALUE_ACCESSOR],
26+
host: {
27+
"(touch)": "onTouched()",
28+
"(valueChange)": "onChange($event.value)",
29+
},
2230
})
2331
export class NumberValueAccessor extends BaseValueAccessor<Slider> { // tslint:disable-line:directive-class-suffix
24-
@HostListener("valueChange", ["$event"])
25-
valueChangeListener(event: any) {
26-
this.onChange(event.value);
27-
}
28-
29-
onTouched = () => { };
32+
onChange = (_: any) => {};
33+
onTouched = () => {};
3034

3135
constructor(elementRef: ElementRef) {
3236
super(elementRef.nativeElement);
@@ -36,5 +40,6 @@ export class NumberValueAccessor extends BaseValueAccessor<Slider> { // tslint:d
3640
this.view.value = value;
3741
}
3842

43+
registerOnChange(fn: (_: any) => {}): void { this.onChange = fn; }
3944
registerOnTouched(fn: () => void): void { this.onTouched = fn; }
4045
}

‎nativescript-angular/value-accessors/selectedIndex-value-accessor.ts‎

Lines changed: 29 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1-
import { Directive, ElementRef, forwardRef, AfterViewInit, HostListener } from "@angular/core";
1+
import { Directive, ElementRef, forwardRef, AfterViewInit } from "@angular/core";
22
import { NG_VALUE_ACCESSOR } from "@angular/forms";
33
import { BaseValueAccessor } from "./base-value-accessor";
44
import { View } from "tns-core-modules/ui/core/view";
55

6-
const SELECTED_INDEX_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR,
7-
useExisting: forwardRef(() => SelectedIndexValueAccessor), multi: true};
6+
const SELECTED_INDEX_VALUE_ACCESSOR = {
7+
provide: NG_VALUE_ACCESSOR,
8+
useExisting: forwardRef(() => SelectedIndexValueAccessor),
9+
multi: true,
10+
};
811

912
export type SelectableView = {selectedIndex: number} & View;
1013

@@ -18,17 +21,30 @@ export type SelectableView = {selectedIndex: number} & View;
1821
* ```
1922
*/
2023
@Directive({
21-
// tslint:disable-next-line:max-line-length directive-selector
22-
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]",
23-
providers: [SELECTED_INDEX_VALUE_ACCESSOR]
24+
selector:
25+
"SegmentedBar[ngModel],SegmentedBar[formControlName]," +
26+
"segmentedBar[ngModel],segmentedBar[formControlName]," +
27+
"segmentedbar[ngModel],segmentedbar[formControlName]," +
28+
"segmented-bar[ngModel],segmented-bar[formControlName]," +
29+
30+
"ListPicker[ngModel],ListPicker[formControlName]," +
31+
"listPicker[ngModel],listPicker[formControlName]," +
32+
"listpicker[ngModel],listpicker[formControlName]," +
33+
"list-picker[ngModel],list-picker[formControlName]," +
34+
35+
"TabView[ngModel],TabView[formControlName]," +
36+
"tabView[ngModel],tabView[formControlName]," +
37+
"tabview[ngModel],tabview[formControlName]," +
38+
"tab-view[ngModel],tab-view[formControlName]",
39+
providers: [SELECTED_INDEX_VALUE_ACCESSOR],
40+
host: {
41+
"(touch)": "onTouched()",
42+
"(selectedIndexChange)": "onChange($event.value)",
43+
},
2444
})
2545
export class SelectedIndexValueAccessor extends BaseValueAccessor<SelectableView> implements AfterViewInit { // tslint:disable-line:max-line-length directive-class-suffix
26-
@HostListener("selectedIndexChange", ["$event"])
27-
selectedIndexChangeListener(event: any) {
28-
this.onChange(event.value);
29-
}
30-
31-
onTouched = () => { };
46+
onChange = (_: any) => {};
47+
onTouched = () => {};
3248

3349
constructor(elementRef: ElementRef) {
3450
super(elementRef.nativeElement);
@@ -49,5 +65,6 @@ export class SelectedIndexValueAccessor extends BaseValueAccessor<SelectableView
4965
this.view.selectedIndex = this.value;
5066
}
5167

68+
registerOnChange(fn: (_: any) => {}): void { this.onChange = fn; }
5269
registerOnTouched(fn: () => void): void { this.onTouched = fn; }
5370
}

‎nativescript-angular/value-accessors/text-value-accessor.ts‎

Lines changed: 29 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1-
import { Directive, ElementRef, forwardRef, HostListener } from "@angular/core";
1+
import { Directive, ElementRef, forwardRef } from "@angular/core";
22
import { NG_VALUE_ACCESSOR } from "@angular/forms";
33
import { BaseValueAccessor } from "./base-value-accessor";
44
import { View } from "tns-core-modules/ui/core/view";
55

6-
const TEXT_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR,
7-
useExisting: forwardRef(() => TextValueAccessor), multi: true};
6+
const TEXT_VALUE_ACCESSOR = {
7+
provide: NG_VALUE_ACCESSOR,
8+
useExisting: forwardRef(() => TextValueAccessor),
9+
multi: true,
10+
};
811

912
export type TextView = {text: string} & View;
1013

@@ -18,17 +21,30 @@ export type TextView = {text: string} & View;
1821
* ```
1922
*/
2023
@Directive({
21-
// tslint:disable-next-line:max-line-length directive-selector
22-
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]",
23-
providers: [TEXT_VALUE_ACCESSOR]
24+
selector:
25+
"TextField[ngModel],TextField[formControlName]," +
26+
"textField[ngModel],textField[formControlName]," +
27+
"textfield[ngModel],textfield[formControlName]," +
28+
"text-field[ngModel],text-field[formControlName]," +
29+
30+
"TextView[ngModel],TextView[formControlName]," +
31+
"textView[ngModel],textView[formControlName]," +
32+
"textview[ngModel],textview[formControlName]," +
33+
"text-view[ngModel],text-view[formControlName]," +
34+
35+
"SearchBar[ngModel],SearchBar[formControlName]," +
36+
"searchBar[ngModel],searchBar[formControlName]," +
37+
"searchbar[ngModel],searchbar[formControlName]," +
38+
"search-bar[ngModel], search-bar[formControlName]",
39+
providers: [TEXT_VALUE_ACCESSOR],
40+
host: {
41+
"(touch)": "onTouch()",
42+
"(textChange)": "onChange(event.value)",
43+
},
2444
})
2545
export class TextValueAccessor extends BaseValueAccessor<TextView> { // tslint:disable-line:directive-class-suffix
26-
@HostListener("textChange", ["$event"])
27-
textChangeListener(event: any) {
28-
this.onChange(event.value);
29-
}
30-
31-
onTouched = () => { };
46+
onChange = (_: any) => {};
47+
onTouched = () => {};
3248

3349
constructor(elementRef: ElementRef) {
3450
super(elementRef.nativeElement);
@@ -38,5 +54,6 @@ export class TextValueAccessor extends BaseValueAccessor<TextView> { // tslint:d
3854
this.view.text = value;
3955
}
4056

57+
registerOnChange(fn: (_: any) => {}): void { this.onChange = fn; }
4158
registerOnTouched(fn: () => void): void { this.onTouched = fn; }
4259
}

‎nativescript-angular/value-accessors/time-value-accessor.ts‎

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1-
import { Directive, ElementRef, forwardRef, HostListener } from "@angular/core";
1+
import { Directive, ElementRef, forwardRef } from "@angular/core";
22
import { NG_VALUE_ACCESSOR } from "@angular/forms";
33
import { BaseValueAccessor } from "./base-value-accessor";
44
import { TimePicker } from "tns-core-modules/ui/time-picker";
55

6-
const TIME_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR,
7-
useExisting: forwardRef(() => TimeValueAccessor), multi: true};
6+
const TIME_VALUE_ACCESSOR = {
7+
provide: NG_VALUE_ACCESSOR,
8+
useExisting: forwardRef(() => TimeValueAccessor),
9+
multi: true,
10+
};
811

912
/**
1013
* 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,
1619
* ```
1720
*/
1821
@Directive({
19-
// tslint:disable-next-line:max-line-length directive-selector
20-
selector: "TimePicker[ngModel], TimePicker[formControlName], timePicker[ngModel], timePicker[formControlName], time-picker[ngModel], time-picker[formControlName]",
21-
providers: [TIME_VALUE_ACCESSOR]
22+
selector:
23+
"TimePicker[ngModel],TimePicker[formControlName]," +
24+
"timepicker[ngModel],timepicker[formControlName]," +
25+
"timePicker[ngModel],timePicker[formControlName]," +
26+
"time-picker[ngModel], time-picker[formControlName]",
27+
providers: [TIME_VALUE_ACCESSOR],
28+
host: {
29+
"(touch)": "onTouch()",
30+
"(timeChange)": "onChange($event.value)",
31+
},
2232
})
2333
export class TimeValueAccessor extends BaseValueAccessor<TimePicker> { // tslint:disable-line:directive-class-suffix
24-
@HostListener("timeChange", ["$event"])
25-
timeChangeListener(event: any) {
26-
this.onChange(event.value);
27-
}
28-
34+
onChange = (_: any) => {};
2935
onTouched = () => { };
3036

3137
constructor(elementRef: ElementRef) {
@@ -36,5 +42,6 @@ export class TimeValueAccessor extends BaseValueAccessor<TimePicker> { // tslint
3642
this.view.time = value;
3743
}
3844

45+
registerOnChange(fn: (_: any) => {}): void { this.onChange = fn; }
3946
registerOnTouched(fn: () => void): void { this.onTouched = fn; }
4047
}

0 commit comments

Comments
 (0)