Angular 12中updateValueAndValidity无法更新表单控件值的问题

问题概述 #

• 下拉控件切换值时，关联控件需根据模型同步更新
• 下拉值变更后，表单已获取新值，但调用this.form.updateValueAndValidity()后UI未同步更新

页面HTML代码 #

<div class="form-control">
    <label class="form-control-label" for="type">Type</label>
    <select id="type" name="Selection" formControlName="Type">
        <option value="null" selected="true" id="default">Select type...</option>
        <option *ngFor="let item of supportedTypes" [value]="item.Type" id="{{item.Type}}">{{item.ShortName}}</option>
    </select>
</div>


<!-- 以下控件依赖上方选中值，切换选项时需显示对应内容 -->

<div class="form-control">
    <label class="form-control-label" for="type">Type</label>
    <select id="type" name="Selection" formControlName="Type">
        <option value="null" selected="true" id="default">Select type...</option>
        <option *ngFor="let item of supportedTypes" [value]="item.Type" id="{{item.Type}}">{{item.ShortName}}</option>
    </select>
</div>

<div>
    <div class="form-control tooltip">
        <label class="form-control-label" for="name">Name</label>
        <div class="tooltip">
            <input type="text" maxlength=13 formControlName="Name" id="name">
        </div>
    </div>
    <div class="form-control tooltip">
        <label class="form-control-label" for="age">Age</label>
        <div class="tooltip">
            <input type="text" formControlName="Age" NumberOnly="true" id="age">
        </div>
    </div>
    <div class="form-control tooltip">
        <label class="form-control-label" for="Height">Height</label>
        <div class="tooltip">
            <input type="text" formControlName="Height" NumberOnly="true" id="height">
        </div>
    </div>
    <div class="form-control tooltip">
        <label class="form-control-label" for="weight">Weight (kg)</label>
        <div class="tooltip">
            <input type="text" NumberOnly="true" formControlName="Weight" id="weight">
        </div>
    </div>
</div>

表单更新逻辑代码 #

updateControls(show: boolean, formMeta: object, data?: { [key: string]: string }) 
{
  Object.keys(formMeta).forEach((formName) => 
  {
    if (!show)
    {
      // 未选中时移除控件
      this.form.removeControl(formName);
      return;
    }
    // 值变更时添加控件并更新值
    this.form.addControl(formName, formMeta[formName]);
    this.form.get(formName).patchValue(data[formName]);
  });

  this.form.updateValueAndValidity();    // 调用后UI仍未更新
}

解决方法 #

1. 替换动态增删控件为状态控制 #

Angular 12对表单控件的动态增删处理逻辑有变化，频繁增删会导致变更检测失效。建议提前初始化所有控件，通过启用/禁用或*ngIf控制显示：

// 初始化阶段创建所有所需控件
ngOnInit() {
  Object.keys(formMeta).forEach(formName => {
    this.form.addControl(formName, formMeta[formName]);
    this.form.get(formName).disable(); // 默认禁用隐藏
  });
}

updateControls(show: boolean, data?: { [key: string]: string }) {
  Object.keys(this.form.controls).forEach(formName => {
    const control = this.form.get(formName);
    if (!show) {
      control.disable();
      control.patchValue('');
    } else {
      control.enable();
      control.patchValue(data[formName]);
    }
  });
}

2. 手动触发变更检测 #

如果必须保留动态增删逻辑，需要注入ChangeDetectorRef手动触发变更检测：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

updateControls(show: boolean, formMeta: object, data?: { [key: string]: string }) 
{
  Object.keys(formMeta).forEach((formName) => 
  {
    if (!show)
    {
      this.form.removeControl(formName);
      return;
    }
    this.form.addControl(formName, formMeta[formName]);
    this.form.get(formName).patchValue(data[formName]);
  });

  this.form.updateValueAndValidity();
  this.cdr.detectChanges(); // 强制触发UI更新
}

3. 修复HTML重复ID问题 #

页面中有两个id="type"的下拉控件，会导致DOM冲突，影响表单绑定，建议修改为唯一ID，比如id="primary-type"和id="secondary-type"。

4. 用setValue确保值正确设置 #

新增控件时，setValue比patchValue更严格，能确保值被正确赋值：

this.form.get(formName).setValue(data[formName]);

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