Merge pull request #36 from NativeScript/nnikolov/TextValueAccessor

Added TextValueAccessor to support two-way binding via ngModel.

Author: Nedyalko Nikolov

Diff for: ng-sample/app/renderer-test.ts

@@ -1,4 +1,6 @@
 import {Component, Directive, Host, ElementRef, Input} from 'angular2/core';
+import { Observable } from 'data/observable';
+import { TextValueAccessor } from './nativescript-angular/text-value-accessor';
 
 @Component({
     selector: 'templated-component',
@@ -24,10 +26,12 @@ export class ProgressComponent {
 
 @Component({
 	selector: 'renderer-test',
-    directives: [TemplatedComponent, ProgressComponent],
+    directives: [TemplatedComponent, ProgressComponent, TextValueAccessor],
 	template: `    
     <StackLayout orientation='vertical'>
         <Progress value="50" style="color: red"></Progress>
+        <Label [text]='model.test'></Label>
+        <TextField #name [ngModel]='model.test' (ngModelChange)="model.test=setUpperCase($event)" fontSize='20' padding='20'></TextField>
         <Label [class.valid]="isValid" [class.invalid]="!isValid" text='Name' fontSize='20' verticalAlignment='center' padding='20'></Label>
         <TextField #name text='John' fontSize='20' padding='20'></TextField>
         <Button [text]='buttonText' (tap)='onSave($event, name.text, $el)'></Button>
@@ -49,12 +53,14 @@ export class RendererTest {
     public moreDetailsText: string = "";
     public detailLines: Array<string> = [];
     public isValid: boolean = true;
+    public model: Observable;
 
     constructor() {
         this.buttonText = 'Save...'
         this.showDetails = true;
         this.detailsText = 'plain ng-if directive \ndetail 1-2-3...';
         this.moreDetailsText = 'More details:';
+        this.model = new Observable({'test': 'Jack'});
 
         this.detailLines = [
             "ngFor inside a ngIf 1",
@@ -67,8 +73,22 @@ export class RendererTest {
         alert(name);
     }
 
+    testLoaded($event) {
+        console.log("testLoaded called with event args: " + $event);
+    }
+
     onToggleDetails() {
         console.log('onToggleDetails current: ' + this.showDetails);
         this.showDetails = !this.showDetails;
     }
+
+    setUpperCase($event) {
+        if ($event.value && $event.value.toUpperCase) {
+            return $event.value.toUpperCase();
+        }
+        if (typeof $event === "string") {
+            return $event.toUpperCase();
+        }
+        return $event;
+    }
 }

Diff for: src/nativescript-angular/text-value-accessor.ts

@@ -0,0 +1,38 @@
+import {Directive, ElementRef, Renderer, Self, forwardRef, Provider} from 'angular2/core';
+import {NG_VALUE_ACCESSOR, ControlValueAccessor} from 'angular2/src/common/forms/directives/control_value_accessor';
+import {isBlank, CONST_EXPR} from 'angular2/src/facade/lang';
+
+const TEXT_VALUE_ACCESSOR = CONST_EXPR(new Provider(
+    NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => TextValueAccessor), multi: true}));
+
+/**
+ * The accessor for writing a text and listening to changes that is used by the
+ * {@link NgModel}, {@link NgFormControl}, and {@link NgControlName} directives.
+ *
+ *  ### Example
+ *  ```
+ *  <TextField [(ngModel)]='model.test'>
+ *  ```
+ */
+@Directive({
+  selector: 'TextField[ngModel]',
+  // TODO: vsavkin replace the above selector with the one below it once
+  // https://github.com/angular/angular/issues/3011 is implemented
+  // selector: '[ngControl],[ngModel],[ngFormControl]',
+  host: {'(textChange)': 'onChange($event.value)'},
+  bindings: [TEXT_VALUE_ACCESSOR]
+})
+export class TextValueAccessor implements ControlValueAccessor {
+  onChange = (_) => {};
+  onTouched = () => {};
+
+  constructor(private _renderer: Renderer, private _elementRef: ElementRef) { }
+
+  writeValue(value: any): void {
+    var normalizedValue = isBlank(value) ? '' : value;
+    this._renderer.setElementProperty(this._elementRef.nativeElement, 'text', normalizedValue);
+  }
+
+  registerOnChange(fn: (_: any) => void): void { this.onChange = fn; }
+  registerOnTouched(fn: () => void): void { this.onTouched = fn; }
+}