Angular中向数组类型FormControl推送值的正确方法及问题排查

• Angular的响应式表单采用不可变数据设计原则，FormControl只会在你调用官方提供的setValue/patchValue等API更新值时，才会触发内部的变更检测、校验逻辑以及UI同步。
• 你直接调用this.toppings.value.push('Onion')是在原有数组的引用上修改内容，FormControl无法感知到这次数据变更，所以既不会运行校验器，也不会通知UI更新，只有你直接打印修改后的数组对象才会显示最新值，这属于不符合规范的操作。

直接通过setValue全量更新FormControl的值即可，修改后的add方法如下：

add() {
  const currentVal = this.toppings.value as string[];
  // 可选：增加重复值判断，避免重复添加同一个选项
  if (!currentVal.includes('Onion')) {
    // 展开原有数组，追加新值后传入setValue，会自动触发校验和UI更新
    this.toppings.setValue([...currentVal, 'Onion']);
  }
  console.log(this.toppings.value);
}

所有FormControl的值更新都建议走官方提供的API，不要直接修改FormControl.value属性的内容，避免出现状态不同步的隐性问题。

如果因为特殊场景需要直接修改value内容，可以在修改完成后手动调用更新方法触发状态同步，但不建议常规场景使用：

add() {
  this.toppings.value.push('Onion');
  // 手动触发校验和状态更新
  this.toppings.updateValueAndValidity();
  console.log(this.toppings.value);
}

内容的提问来源于stack exchange，提问作者mixnote