Angular动态添加地址表单验证错误同步问题的修复方案

你的问题根源在于所有重复的地址模块都绑定了同一个表单组实例，导致验证状态在多个模块间共享。要解决这个问题，你需要用FormArray来管理多个独立的地址表单组，每个地址模块对应一个单独的FormGroup，确保它们的验证状态互不干扰。

步骤1：重构TS代码，改用FormArray管理多地址 #

修改app.component.ts，创建一个FormArray存储多个地址表单组，并提供新增地址的方法：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 用FormArray存储多个独立的地址表单组
  addresses = this.formBuilder.array([this.createAddressGroup()]);

  constructor(private formBuilder: FormBuilder) {}

  // 创建单个地址的表单组（复用原有表单结构）
  createAddressGroup(): FormGroup {
    return this.formBuilder.group({
      line1: ["", Validators.required],
      line2: '',
      postalCode: ["", Validators.required],
    });
  }

  // 添加新地址的方法
  addAddress() {
    this.addresses.push(this.createAddressGroup());
  }

  // 简化模板中对表单控件的获取
  get addressControls() {
    return this.addresses.controls as FormGroup[];
  }
}

步骤2：修改模板，循环渲染独立的地址模块 #

修改app.component.html，用formArrayName和*ngFor循环渲染每个地址，确保每个模块绑定独立的表单组：

<form [formGroup]="addresses">
  <!-- 循环渲染每个地址模块，每个模块对应一个独立的FormGroup -->
  <div *ngFor="let address of addressControls; let i = index" [formGroupName]="i">
    <h3>地址 {{ i + 1 }}</h3>
    
    <label for="line1-{{i}}">STREET 1</label>
    <input id="line1-{{i}}" type="text" formControlName="line1" required/>
    <error-component [control]="address.controls.line1"></error-component>

    <label for="line2-{{i}}">STREET 2</label>
    <input id="line2-{{i}}" type="text" formControlName="line2"/>

    <label for="postalCode-{{i}}">POSTAL CODE</label>
    <input id="postalCode-{{i}}" type="text" formControlName="postalCode" required/>
    <error-component [control]="address.controls.postalCode"></error-component>
  </div>

  <!-- 点击新增地址按钮 -->
  <button type="button" (click)="addAddress()">添加另一个地址</button>
</form>

关键说明 #

• 每个地址模块通过[formGroupName]="i"绑定到FormArray中对应的独立FormGroup，验证状态完全隔离，不会互相影响。
• 输入框的id添加了索引{{i}}，避免多个模块的id重复（HTML中id必须唯一）。
• 错误组件现在绑定当前循环中address.controls.line1，即对应地址表单组的控件，不再共享状态。

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