Angular 中的反应表单：监听变化

像FormGroup 和** FormControl** 这样的反应式表单实例都有一个valueChanges方法，该方法返回一个发出最新值的可观测对象。因此，您可以订阅** valueChanges** 来更新实例变量或执行操作。

<$>[注意]如果您对这些都不陌生，请查看我们的Reactive Forms简介]。<$>

在这里，我们将创建一个非常简单的示例，每当表单中的值发生更改时，该示例都会更新模板字符串。

首先，让我们用FormBuilder初始化我们的反应表单：

 1myForm: FormGroup;
 2formattedMessage: string;
 3
 4constructor(private formBuilder: FormBuilder) {}
 5
 6ngOnInit() {
 7  this.myForm = this.formBuilder.group({
 8    name: '',
 9    email: '',
10    message: ''
11  });
12
13  this.onChanges();
14}

请注意，在初始化表单之后，我们如何在ngOnInit生命周期挂钩中调用onChanges方法。下面是我们的onChanges 方法的内容：

 1onChanges(): void {
 2  this.myForm.valueChanges.subscribe(val => {
 3    this.formattedMessage =
 4    `Hello,
 5
 6    My name is ${val.name} and my email is ${val.email}.
 7
 8    I would like to tell you that ${val.message}.`;
 9  });
10}

您还可以监听特定表单控件上的更改，而不是整个表单组：

1onChanges(): void {
2  this.myForm.get('name').valueChanges.subscribe(val => {
3    this.formattedMessage = `My name is ${val}.`;
4  });
5}

🌌由于valueChanges返回一个可观察对象，因此您的天空几乎就是您可以对所发出的值执行的操作的限制。