typescript - angular2 表单 可观察对象/事件

基于 David East 的教程 (https://gist.github.com/davideast/0b7efc93e0ba9aaa446e)，我正在尝试在一个非常小的表单示例上让 Angular2 的 observable 工作。

基本上，我希望每当输入值改变时，某个事件就会被触发并被我的观察者捕捉到。但由于某种奇怪的原因，我的代码不起作用...

库版本：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 不是一个函数

答案＃1

这篇博客文章解释了 Angular 2 表单中 旧的 双向绑定方法和 新的 响应式方法之间的区别。对于后者，它与一些 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));
  });

答案＃2

我找不到任何订阅者函数，所以我使用了观察者：

this.myForm.valueChanges.observer({next: (value) => this.address = value});

在这种情况下，“this.address”是一个表示 myForm 数据的对象。