angular - 如何观察 Angular 中的表单变化

Question

在 Angular 中，我可能有一个如下所示的表单:

<ng-form>
    <label>First Name</label>
    <input type="text" ng-model="model.first_name">

    <label>Last Name</label>
    <input type="text" ng-model="model.last_name">
</ng-form>

在相应的 Controller 中，我可以像这样轻松地观察该表单内容的变化:

function($scope) {

    $scope.model = {};

    $scope.$watch('model', () => {
        // Model has updated
    }, true);

}

这是一个 Angular example on JSFiddle .

我无法弄清楚如何在 Angular 中完成同样的事情。显然，我们不再有$scope、$rootScope。一定有一种方法可以完成同样的事情吗？

这是一个 Angular example on Plunker .

Answer 1

_{UPD。答案和演示已更新以与最新的 Angular 保持一致。}

---

由于 FormGroup，您可以订阅整个表单更改表示表单提供 valueChanges 属性，它是一个 Observerable 实例:

this.form.valueChanges.subscribe(data => console.log('Form changes', data));

在这种情况下，您需要使用 FormBuilder 手动构造表单.像这样:

export class App {
  constructor(private formBuilder: FormBuilder) {
    this.form = formBuilder.group({
      firstName: 'Thomas',
      lastName: 'Mann'
    })

    this.form.valueChanges.subscribe(data => {
      console.log('Form changes', data)
      this.output = data
    })
  }
}

查看此演示中的valueChanges:http://plnkr.co/edit/xOz5xaQyMlRzSrgtt7Wn?p=preview