Angular 7:触发值在addControl上的变化，如果值存在

在Angular中，FormControl 是表单控件的核心类，它允许开发者跟踪表单控件的值以及验证状态。当你在 FormControl 上使用 addControl 方法添加一个新的控件时，你可能希望监听这个新控件的值变化。

基础概念

FormControl 是 Angular 表单模块中的一个类，它代表了一个单一的表单控件，比如一个输入框。FormGroup 是 FormControl 的容器，它可以包含多个 FormControl。

监听值变化的方法

你可以使用 valueChanges 属性来监听 FormControl 的值变化。这是一个 Observable 对象，每当控件的值发生变化时，它都会发出新的值。

示例代码

以下是一个简单的例子，展示了如何在添加一个新的 FormControl 后监听其值的变化：

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="form">
      <input formControlName="newControl" placeholder="New Control">
    </form>
  `
})
export class AppComponent {
  form = new FormGroup({});

  constructor() {
    // 添加一个新的FormControl
    this.form.addControl('newControl', new FormControl(''));

    // 监听新控件的值变化
    this.form.get('newControl').valueChanges.subscribe(value => {
      console.log('New control value:', value);
    });
  }
}

在这个例子中，我们首先创建了一个空的 FormGroup。然后在构造函数中，我们使用 addControl 方法添加了一个名为 newControl 的新控件，并且立即订阅了它的 valueChanges 属性。每当用户在输入框中输入内容时，控制台就会打印出新控件的值。

应用场景

这种监听值变化的方法在多种场景下都非常有用：

1. 实时验证用户输入。
2. 根据用户的输入动态更新UI。
3. 在用户输入时触发后台请求或计算。

可能遇到的问题及解决方法

如果你在添加控件后没有收到值变化的通知，可能是因为：

• 订阅时机问题：确保你在添加控件后立即订阅了 valueChanges。
• 异步问题：如果你在异步操作后添加控件，确保订阅是在异步操作完成后进行的。
• 模板绑定问题：确保你的模板正确地绑定了 FormControl。

解决方法

• 确保在添加控件后立即订阅 valueChanges。
• 如果你在异步操作中添加控件，使用 async 管道或在异步操作完成后手动订阅。
• 检查模板绑定是否正确，确保使用了 formControlName 或 FormControl 实例。

通过这种方式，你可以有效地监听和管理 Angular 表单中的控件值变化。