feat(forms): Enable reactive forms.

Add control[formControlName] selectors to value accessor
directives.

Author: hdeshev

nativescript-angular/index.ts

@@ -17,3 +17,4 @@ export * from "./view-util";
 export * from "./animation-driver";
 export * from "./resource-loader";
 export * from "./element-registry";
+export * from "./value-accessors/base-value-accessor";

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

@@ -1,5 +1,22 @@
 import { ControlValueAccessor } from "@angular/forms";
 
+export function generateValueAccessorSelector(...tagNames: string[]): string {
+    const tags: string[] = [];
+    tagNames.forEach(tagName => {
+        tags.push(tagName); // regular tag
+        tags.push(tagName.charAt(0).toLowerCase() + tagName.slice(1)); // lowercase first char
+        tags.push(tagName.split(/(?=[A-Z])/).join("-").toLowerCase()); // kebab case
+    });
+
+    const selectors = [];
+    for (const tag of tags) {
+        for (const directive of ["ngModel", "formControlName"]) {
+            selectors.push(`${tag}[${directive}]`);
+        }
+    }
+    return selectors.join(", ");
+}
+
 export class BaseValueAccessor<TView> implements ControlValueAccessor {
     constructor(public view: TView) { }
 

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

@@ -1,7 +1,7 @@
 import { Directive, ElementRef, forwardRef, HostListener } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import { isBlank } from "../lang-facade";
-import { BaseValueAccessor } from "./base-value-accessor";
+import { BaseValueAccessor, generateValueAccessorSelector } from "./base-value-accessor";
 import { Switch } from "ui/switch";
 
 const CHECKED_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR,
@@ -17,7 +17,7 @@ const CHECKED_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR,
  *  ```
  */
 @Directive({
-    selector: "Switch[ngModel], switch[ngModel]", // tslint:disable-line:directive-selector
+    selector: generateValueAccessorSelector("Switch"),
     providers: [CHECKED_VALUE_ACCESSOR]
 })
 export class CheckedValueAccessor extends BaseValueAccessor<Switch> { // tslint:disable-line:directive-class-suffix

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

@@ -1,7 +1,7 @@
 import { Directive, ElementRef, forwardRef, HostListener } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import { isBlank, isDate } from "../lang-facade";
-import { BaseValueAccessor } from "./base-value-accessor";
+import { BaseValueAccessor, generateValueAccessorSelector } from "./base-value-accessor";
 import { DatePicker } from "ui/date-picker";
 
 const DATE_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR,
@@ -17,7 +17,7 @@ const DATE_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR,
  *  ```
  */
 @Directive({
-    selector: "DatePicker[ngModel], datePicker[ngModel], date-picker[ngModel]", // tslint:disable-line:max-line-length directive-selector
+    selector: generateValueAccessorSelector("DatePicker"),
     providers: [DATE_VALUE_ACCESSOR]
 })
 export class DateValueAccessor extends BaseValueAccessor<DatePicker> { // tslint:disable-line:directive-class-suffix

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

@@ -1,7 +1,7 @@
 import { Directive, ElementRef, forwardRef, HostListener } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import { isBlank, isNumber } from "../lang-facade";
-import { BaseValueAccessor } from "./base-value-accessor";
+import { BaseValueAccessor, generateValueAccessorSelector } from "./base-value-accessor";
 import { Slider } from "ui/slider";
 
 const NUMBER_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR,
@@ -17,7 +17,7 @@ const NUMBER_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR,
  *  ```
  */
 @Directive({
-    selector: "Slider[ngModel], slider[ngModel]", // tslint:disable-line:directive-selector
+    selector: generateValueAccessorSelector("Slider"),
     providers: [NUMBER_VALUE_ACCESSOR]
 })
 export class NumberValueAccessor extends BaseValueAccessor<Slider> { // tslint:disable-line:directive-class-suffix

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

@@ -1,6 +1,6 @@
 import { Directive, ElementRef, forwardRef, AfterViewInit, HostListener } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
-import { BaseValueAccessor } from "./base-value-accessor";
+import { BaseValueAccessor, generateValueAccessorSelector } from "./base-value-accessor";
 import { View } from "ui/core/view";
 import { convertToInt } from "../common/utils";
 
@@ -19,7 +19,7 @@ export type SelectableView = {selectedIndex: number} & View;
  *  ```
  */
 @Directive({
-    selector: "SegmentedBar[ngModel], segmentedBar[ngModel], segmented-bar[ngModel], ListPicker[ngModel], listPicker[ngModel], list-picker[ngModel], TabView[ngModel], tabView[ngModel], tab-view[ngModel]", // tslint:disable-line:max-line-length directive-selector
+    selector: generateValueAccessorSelector("SegmentedBar", "ListPicker", "TabView"),
     providers: [SELECTED_INDEX_VALUE_ACCESSOR]
 })
 export class SelectedIndexValueAccessor extends BaseValueAccessor<SelectableView> implements AfterViewInit { // tslint:disable-line:max-line-length directive-class-suffix

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

@@ -1,7 +1,7 @@
 import { Directive, ElementRef, forwardRef, HostListener } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import { isBlank } from "../lang-facade";
-import { BaseValueAccessor } from "./base-value-accessor";
+import { BaseValueAccessor, generateValueAccessorSelector } from "./base-value-accessor";
 import { View } from "ui/core/view";
 
 const TEXT_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR,
@@ -19,7 +19,7 @@ export type TextView = {text: string} & View;
  *  ```
  */
 @Directive({
-    selector: "TextField[ngModel], textField[ngModel], text-field[ngModel], TextView[ngModel], textView[ngModel], text-view[ngModel], SearchBar[ngModel], search-bar[ngModel], searchBar[ngModel]",  // tslint:disable-line:max-line-length directive-selector
+    selector: generateValueAccessorSelector("TextField", "TextView", "SearchBar"),
     providers: [TEXT_VALUE_ACCESSOR]
 })
 export class TextValueAccessor extends BaseValueAccessor<TextView> { // tslint:disable-line:directive-class-suffix

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

@@ -1,7 +1,7 @@
 import { Directive, ElementRef, forwardRef, HostListener } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import { isBlank, isDate } from "../lang-facade";
-import { BaseValueAccessor } from "./base-value-accessor";
+import { BaseValueAccessor, generateValueAccessorSelector } from "./base-value-accessor";
 import { TimePicker } from "ui/time-picker";
 
 const TIME_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR,
@@ -17,7 +17,7 @@ const TIME_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR,
  *  ```
  */
 @Directive({
-    selector: "TimePicker[ngModel], timePicker[ngModel], time-picker[ngModel]", // tslint:disable-line:max-line-length directive-selector
+    selector: generateValueAccessorSelector("TimePicker"),
     providers: [TIME_VALUE_ACCESSOR]
 })
 export class TimeValueAccessor extends BaseValueAccessor<TimePicker> { // tslint:disable-line:directive-class-suffix

tests/app/tests/value-accessor-tests.ts

@@ -8,6 +8,7 @@ import {TimePicker} from "ui/time-picker";
 import {ListPicker} from "ui/list-picker";
 import {TextField} from "ui/text-field";
 import {
+    generateValueAccessorSelector,
     NumberValueAccessor,
     CheckedValueAccessor,
     DateValueAccessor,
@@ -100,7 +101,7 @@ describe("two-way binding via ng-model", () => {
 
     it("converts strings to int selection", () => {
         const accessor = new TestSelectedIndexValueAccessor()
-        
+
         accessor.writeValue(null);
         accessor.ngAfterViewInit();
         assert.strictEqual(0, accessor.view.selectedIndex, "default to 0 on empty")
@@ -143,6 +144,26 @@ describe("two-way binding via ng-model", () => {
     });
 })
 
+describe("target selector registration", () => {
+    it("supports uppercase(unchanged) camel tags", () => {
+        assert.include(generateValueAccessorSelector("TextField"), "TextField[ngModel]");
+    });
+    it("supports lowercase camel tags", () => {
+        assert.include(generateValueAccessorSelector("TextField"), "textField[ngModel]");
+    });
+    it("supports kebab case tags", () => {
+        assert.include(generateValueAccessorSelector("TextField"), "text-field[ngModel]");
+    });
+    it("supports formControlName", () => {
+        assert.include(generateValueAccessorSelector("TextField"), "TextField[formControlName]");
+    });
+    it("supports multiple tags", () => {
+        const selector = generateValueAccessorSelector("TextField", "TextView");
+        assert.include(selector, "TextField[ngModel]");
+        assert.include(selector, "TextField[formControlName]");
+    });
+});
+
 function formatDate(date: Date) {
     return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
 }

tests/package.json

@@ -2,7 +2,7 @@
     "nativescript": {
         "id": "org.nativescript.ngtests",
         "tns-android": {
-            "version": "2.4.0"
+            "version": "2.4.1"
         },
         "tns-ios": {
             "version": "2.4.0"