Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 80acf8c

Browse files
author
Nedyalko Nikolov
committed
Added TextValueAccessor to support two-way binding via ngModel.
1 parent 0cd3651 commit 80acf8c

File tree

2 files changed

+60
-1
lines changed

2 files changed

+60
-1
lines changed

‎ng-sample/app/renderer-test.ts‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import {Component, Directive, Host, ElementRef, Input} from 'angular2/core';
2+
import { Observable } from 'data/observable';
3+
import { TextValueAccessor } from './nativescript-angular/text-value-accessor';
24

35
@Component({
46
selector: 'templated-component',
@@ -24,11 +26,13 @@ export class ProgressComponent {
2426

2527
@Component({
2628
selector: 'renderer-test',
27-
directives: [TemplatedComponent, ProgressComponent],
29+
directives: [TemplatedComponent, ProgressComponent,TextValueAccessor],
2830
template: `
2931
<StackLayout orientation='vertical'>
3032
<Progress value="50" style="color: red"></Progress>
3133
<Label [class.valid]="isValid" [class.invalid]="!isValid" text='Name' fontSize='20' verticalAlignment='center' padding='20'></Label>
34+
<Label [text]='model.test'></Label>
35+
<TextField #name [ngModel]='model.test' (ngModelChange)='model.test=setUpperCase($event)' fontSize='20' padding='20'></TextField>
3236
<TextField #name text='John' fontSize='20' padding='20'></TextField>
3337
<Button [text]='buttonText' (tap)='onSave($event, name.text, $el)'></Button>
3438
<Button text='Toggle details' (tap)='onToggleDetails()'></Button>
@@ -49,12 +53,14 @@ export class RendererTest {
4953
public moreDetailsText: string = "";
5054
public detailLines: Array<string> = [];
5155
public isValid: boolean = true;
56+
public model: Observable;
5257

5358
constructor() {
5459
this.buttonText = 'Save...'
5560
this.showDetails = true;
5661
this.detailsText = 'plain ng-if directive \ndetail 1-2-3...';
5762
this.moreDetailsText = 'More details:';
63+
this.model = new Observable({'test': 'John'});
5864

5965
this.detailLines = [
6066
"ngFor inside a ngIf 1",
@@ -67,8 +73,22 @@ export class RendererTest {
6773
alert(name);
6874
}
6975

76+
testLoaded($event) {
77+
console.log("testLoaded called with event args: " + $event);
78+
}
79+
7080
onToggleDetails() {
7181
console.log('onToggleDetails current: ' + this.showDetails);
7282
this.showDetails = !this.showDetails;
7383
}
84+
85+
setUpperCase($event) {
86+
if ($event.value && $event.value.toUpperCase) {
87+
return $event.value.toUpperCase();
88+
}
89+
if (typeof $event === "string") {
90+
return $event.toUpperCase();
91+
}
92+
return $event;
93+
}
7494
}
Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import {Directive, ElementRef, Renderer, Self, forwardRef, Provider} from 'angular2/core';
2+
import {NG_VALUE_ACCESSOR, ControlValueAccessor} from 'angular2/src/common/forms/directives/control_value_accessor';
3+
import {isBlank, CONST_EXPR} from 'angular2/src/facade/lang';
4+
5+
const TEXT_VALUE_ACCESSOR = CONST_EXPR(new Provider(
6+
NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => TextValueAccessor), multi: true}));
7+
8+
/**
9+
* The accessor for writing a text and listening to changes that is used by the
10+
* {@link NgModel}, {@link NgFormControl}, and {@link NgControlName} directives.
11+
*
12+
* ### Example
13+
* ```
14+
* <TextField [(ngModel)]='model.test'>
15+
* ```
16+
*/
17+
@Directive({
18+
selector: 'TextField[ngModel]',
19+
// TODO: vsavkin replace the above selector with the one below it once
20+
// https://github.com/angular/angular/issues/3011 is implemented
21+
// selector: '[ngControl],[ngModel],[ngFormControl]',
22+
host: {'(textChange)': 'onChange($event.value)'},
23+
bindings: [TEXT_VALUE_ACCESSOR]
24+
})
25+
export class TextValueAccessor implements ControlValueAccessor {
26+
onChange = (_) => {};
27+
onTouched = () => {};
28+
29+
constructor(private _renderer: Renderer, private _elementRef: ElementRef) { }
30+
31+
writeValue(value: any): void {
32+
console.log("TextValueAccessor.writeValue with value: " + value);
33+
var normalizedValue = isBlank(value) ? '' : value;
34+
this._renderer.setElementProperty(this._elementRef, 'text', normalizedValue);
35+
}
36+
37+
registerOnChange(fn: (_: any) => void): void { this.onChange = fn; }
38+
registerOnTouched(fn: () => void): void { this.onTouched = fn; }
39+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /