Merge pull request #36 from bradmartin/angular-reactiveforms-support

feat(Angular): FormsModule + ReactiveFormsModule support via TNSCheckBoxModule

Author: NathanWalker

.gitignore

@@ -9,6 +9,12 @@ demo/*.d.ts
 demo/platforms
 demo/node_modules
 demo/.vscode
+demo-ng/app/*.js
+demo-ng/*.d.ts
+demo-ng/platforms
+demo-ng/node_modules
+demo/.vscode
+demo-ng/.vscode
 node_modules
 .vscode/
 .idea/

.npmignore

@@ -1,4 +1,5 @@
 demo/
+demo-ng/
 screens/
 app/
 .vscode/

README.md

@@ -0,0 +1,64 @@
+import { Directive, ElementRef, HostListener, Inject, NgModule, forwardRef } from "@angular/core";
+import { FormsModule, NG_VALUE_ACCESSOR } from "@angular/forms";
+import { registerElement } from "nativescript-angular/element-registry";
+import { BaseValueAccessor } from "nativescript-angular/value-accessors/base-value-accessor";
+import { convertToInt } from "nativescript-angular/common/utils";
+import { View } from "tns-core-modules/ui/core/view";
+
+registerElement("CheckBox", () => require("../checkbox").CheckBox);
+
+const CHECKED_VALUE_ACCESSOR = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => CheckedValueAccessor), multi: true
+};
+
+export type CheckableView = {checked: boolean} & View;
+
+/**
+ * The accessor for setting checked property and listening to changes that is used by the
+ * {@link NgModel} directives.
+ *
+ *  ### Example
+ *  ```
+ *  <CheckBox [(ngModel)]="model.test">
+ *  ```
+ */
+@Directive({
+    selector:  "CheckBox[ngModel], CheckBox[formControlName], CheckBox[ngModel], CheckBox[formControlName], check-box[ngModel], check-box[formControlName]",
+    providers: [CHECKED_VALUE_ACCESSOR]
+})
+export class CheckedValueAccessor extends BaseValueAccessor<CheckableView> { 
+
+    constructor(@Inject(ElementRef) elementRef: ElementRef) {
+        super(elementRef.nativeElement);
+    }
+
+    @HostListener("checkedChange", ["$event"])
+    public checkedChangeListener(event: any) {
+        this.onChange(event.value);
+    }
+
+    public onTouched = () => { };
+
+    public writeValue(value: any): void {
+        this.view.checked = value;
+    }
+
+    public registerOnTouched(fn: () => void): void { this.onTouched = fn; }
+}
+
+@NgModule({
+    declarations: [
+        CheckedValueAccessor
+    ],
+    providers:    [],
+    imports:      [
+        FormsModule
+    ],
+    exports:      [
+        FormsModule,
+        CheckedValueAccessor
+    ]
+})
+export class TNSCheckBoxModule {
+}

angular/index.ts

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+	package="__PACKAGE__"
+	android:versionCode="1"
+	android:versionName="1.0">
+
+	<supports-screens
+		android:smallScreens="true"
+		android:normalScreens="true"
+		android:largeScreens="true"
+		android:xlargeScreens="true"/>
+
+	<uses-sdk
+		android:minSdkVersion="17"
+		android:targetSdkVersion="__APILEVEL__"/>
+
+	<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+	<uses-permission android:name="android.permission.INTERNET"/>
+
+	<application
+		android:name="com.tns.NativeScriptApplication"
+		android:allowBackup="true"
+		android:icon="@drawable/icon"
+		android:label="@string/app_name"
+		android:theme="@style/AppTheme">
+
+		<activity
+			android:name="com.tns.NativeScriptActivity"
+			android:label="@string/title_activity_kimera"
+			android:configChanges="keyboardHidden|orientation|screenSize"
+			android:theme="@style/LaunchScreenTheme">
+
+			<meta-data android:name="SET_THEME_ON_LAUNCH" android:resource="@style/AppTheme" />
+
+			<intent-filter>
+				<action android:name="android.intent.action.MAIN" />
+				<category android:name="android.intent.category.LAUNCHER" />
+			</intent-filter>
+		</activity>
+		<activity android:name="com.tns.ErrorReportActivity"/>
+	</application>
+</manifest>

demo-ng/app/App_Resources/Android/AndroidManifest.xml

@@ -0,0 +1,16 @@
+// Add your native dependencies here:
+
+// Uncomment to add recyclerview-v7 dependency
+//dependencies {
+//	compile 'com.android.support:recyclerview-v7:+'
+//}
+
+android {  
+  defaultConfig {  
+    generatedDensities = []
+    applicationId = "__PACKAGE__"  
+  }  
+  aaptOptions {  
+    additionalParameters "--no-version-vectors"  
+  }  
+}