diff --git a/ng-sample/app/renderer-test.ts b/ng-sample/app/renderer-test.ts index 318b49e03..1052db9f1 100644 --- a/ng-sample/app/renderer-test.ts +++ b/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: ` + + @@ -49,12 +53,14 @@ export class RendererTest { public moreDetailsText: string = ""; public detailLines: Array = []; 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 --git a/src/nativescript-angular/text-value-accessor.ts b/src/nativescript-angular/text-value-accessor.ts new file mode 100644 index 000000000..b788fc5a0 --- /dev/null +++ b/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 + * ``` + * + * ``` + */ +@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; } +}