基于David East教程(https://gist.github.com/davideast/0b7efc93e0ba9aaa446e)我试图让Angular2可观察到非常小的形式示例。
基本上我希望每次输入值改变时某些事件被我的观察者触发并捕获。但是出于某种奇怪的原因,我的代码并没有起作用......
lib版本:typescript 1.5.0-beta,Angular-2.0.0-28
这是Typescript代码:
/// <reference path="../../typings/angular2/angular2.d.ts" />
/// <reference path="../../typings/angular2/angular2_addons.d.ts" />
import {Component, View, bootstrap, Form, EventEmitter} from 'angular2/angular2';
import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
import {Inject} from 'angular2/di';
@Component({
selector: 'mycmp',
appInjector: [FormBuilder]
})
@View({
template: '<form [ng-form-model]="myForm"><input type="text" ng-control="myText">{{myForm.controls.myText.value}}</form>',
directives: [formDirectives],
})
export class MyCmp {
myForm:ControlGroup;
constructor(@Inject(FormBuilder) builder:FormBuilder) {
this.myForm = builder.group({
myText: ["someDefaultVal...", Validators.required]
});
this.myForm.controls.myText.valueChanges.subscribe(function (value) {
console.log("changed value=" + value);
}.bind(this));
}
}
bootstrap(MyCmp);
不幸的是我得到了TypeError: this.myForm.controls.myText.valueChanges.subscribe is not a function
答案 0 :(得分:3)
这个blog post用于解释旧双向绑定方法与Angular 2形式中的 new 反应方法之间的区别。对于后者,它适用于一些form.valueChanges
流,如下所示:
this.form.valueChanges
.map((value) => {
value.firstName = value.firstName.toUpperCase();
return value;
})
.filter((value) => this.form.valid)
.subscribe((value) => {
console.log("Model Driven Form valid value: vm = " + JSON.stringify(value));
});
答案 1 :(得分:1)
我找不到任何订阅者功能,所以我使用了观察者:
this.myForm.valueChanges.observer({next: (value) => this.address = value});
在这种情况下&#34; this.address&#34;是表示myForm数据的对象。
答案 2 :(得分:0)
如果您只是想在每次输入值发生变化时触发某些功能,那么您可以执行以下操作:
<input type="text" ng-control="myText" #mytext (keyup)="firechange($event,mytext)">
并在您的组件中
firechange($event, field){
console.log(field.value);
}
如果你已经@Inject
(也就是说,顺便说一下,在alpha29(https://github.com/angular/angular/blob/master/CHANGELOG.md#breaking-changes中),你不需要使用appInject
。它可以只是:
constructor(builder: FormBuilder) {...}