在 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 .
最佳答案
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
关于angular - 如何观察 Angular 中的表单变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34615425/