Angular中的响应式表单：监听变化

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

如果这对您来说是全新的，请查看我们的 反应式表单介绍 。

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

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

myForm: FormGroup;
formattedMessage: string;

constructor(private formBuilder: FormBuilder) {}

ngOnInit() {
  this.myForm = this.formBuilder.group({
    name: '',
    email: '',
    message: ''
  });

  this.onChanges();
}

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

onChanges(): void {
  this.myForm.valueChanges.subscribe(val => {
    this.formattedMessage =
    `Hello,

    My name is ${val.name} and my email is ${val.email}.

    I would like to tell you that ${val.message}.`;
  });
}

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

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

🌌 由于 valueChanges 返回一个 observable，你的天空几乎是你可以对发出的值做什么的限制。