angular2 – 如何观察Angular 2中的形式变化？

发布时间：2020-12-17 08:49:48 所属栏目：安全来源：网络整理

导读：如何观察Angular 2中的表单更改？在Angular1.x中，我可能有一个如下形式： ng-form labelFirst Name/label input type="text" ng-model="model.first_name" labelLast Name/label input type="text" ng-model="model.last_name"/ng-form 在相应的控制器中，

如何观察Angular 2中的表单更改？

在Angular1.x中，我可能有一个如下形式：

<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>

在相应的控制器中，我可以很容易地监视对表单内容的更改，如：

function($scope) {

    $scope.model = {};

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

}

这里是一个1.X example on JSFiddle。

我无法弄清楚如何在Angular 2中完成同样的事情。显然，我们不再有$ scope等等，但肯定有一个方法，通过它可以完成同样的事情？

这是一个2.X example on Plunker。

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
    })
  }
}

在这个演示中检查值action的变化：http://plnkr.co/edit/xOz5xaQyMlRzSrgtt7Wn?p=preview

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!