Angular中绑定动态formControlName后如何在HTML中正确使用？

核心问题：你用了**单个FormGroup（psiEditForm）**搭配固定的formControlName="psi"，所有*ngFor循环生成的输入框都绑定到同一个FormControl上，自然会同步显示内容。

正确实现方式：改用FormArray或为每个列表项创建独立FormGroup #

方案一：使用FormArray（推荐，符合Angular表单规范） #

1. 重构TS代码
   把原来的psiEditForm改成FormArray，每个列表项对应一个带验证的FormGroup：

   import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
   
   // 组件类内
   psiEditArray: FormArray;
   
   constructor(private fb: FormBuilder) {
     // 初始化FormArray，为psiList每一项创建FormGroup
     this.psiEditArray = this.fb.array(
       this.psiList.map(item => this.fb.group({
         psi: [item.psi, [Validators.required, Validators.minLength(2), Validators.maxLength(2)]]
       }))
     );
   }
   
   // 获取指定索引的FormGroup
   getEditFormGroup(index: number): FormGroup {
     return this.psiEditArray.at(index) as FormGroup;
   }
   
   // 验证控件状态
   checkControlValidation(control: any): boolean {
     return control.invalid && (control.dirty || control.touched);
   }
   
   // 编辑PSI逻辑
   editPsi(index: number, originalPsi: string) {
     const formGroup = this.getEditFormGroup(index);
     if (formGroup.valid) {
       const newPsi = formGroup.value.psi;
       this.psiList[index].psi = newPsi;
       this.psiList[index].toggle = false;
     }
   }
   
   // 清除编辑内容
   clearPsiEdit(index: number) {
     const formGroup = this.getEditFormGroup(index);
     formGroup.patchValue({ psi: this.psiList[index].psi });
   }
   

2. 修改HTML模板
   循环时绑定对应索引的FormGroup，使用固定的formControlName="psi"：

   <div class="psi-list">
     <div class="flex-row" *ngFor="let item of psiList; index as i">
       <p class="row-psi">{{ item.psi }}</p>
       <button class="icon-btn" (click)="deletePsi(item.psi)"><i class="cil-trash"></i></button>
       <button class="icon-btn" (click)="item.toggle = !item.toggle"><i class="cil-pen-alt"></i></button>
       <form [formGroup]="getEditFormGroup(i)" class="form-horizontal" [hidden]="!item.toggle">
         <input class="psi-input" type="text" placeholder="Update PSI here..."
                [ngClass]="{'is-valid': !checkControlValidation(getEditFormGroup(i).controls.psi) && getEditFormGroup(i).controls.psi.touched, 
                            'is-invalid': checkControlValidation(getEditFormGroup(i).controls.psi)}"
                (keydown.enter)="!getEditFormGroup(i).controls.psi.invalid ? editPsi(i, item.psi) : clearPsiEdit(i)" 
                formControlName="psi" />
         <div class="help-block validation-warning" *ngIf="checkControlValidation(getEditFormGroup(i).controls.psi)">
           <i class="fa fa-exclamation fa-lg"></i>Please Enter a Valid 2 Letter PSI
         </div>
       </form>
     </div>
   </div>
   

方案二：为每个列表项创建独立FormGroup #

如果不想用FormArray，可直接给psiList的每一项添加专属FormGroup：

1. TS代码调整

   // 组件初始化时为每个项添加FormGroup
   ngOnInit() {
     this.psiList.forEach(item => {
       item.formGroup = this.fb.group({
         psi: [item.psi, [Validators.required, Validators.minLength(2), Validators.maxLength(2)]]
       });
     });
   }
   
   // 验证方法不变
   checkControlValidation(control: any): boolean {
     return control.invalid && (control.dirty || control.touched);
   }
   
   // 编辑PSI逻辑
   editPsi(item: any) {
     if (item.formGroup.valid) {
       item.psi = item.formGroup.value.psi;
       item.toggle = false;
     }
   }
   
   // 清除编辑内容
   clearPsiEdit(item: any) {
     item.formGroup.patchValue({ psi: item.psi });
   }
   

2. HTML模板修改

   <div class="psi-list">
     <div class="flex-row" *ngFor="let item of psiList; index as i">
       <p class="row-psi">{{ item.psi }}</p>
       <button class="icon-btn" (click)="deletePsi(item.psi)"><i class="cil-trash"></i></button>
       <button class="icon-btn" (click)="item.toggle = !item.toggle"><i class="cil-pen-alt"></i></button>
       <form [formGroup]="item.formGroup" class="form-horizontal" [hidden]="!item.toggle">
         <input class="psi-input" type="text" placeholder="Update PSI here..."
                [ngClass]="{'is-valid': !checkControlValidation(item.formGroup.controls.psi) && item.formGroup.controls.psi.touched, 
                            'is-invalid': checkControlValidation(item.formGroup.controls.psi)}"
                (keydown.enter)="!item.formGroup.controls.psi.invalid ? editPsi(item) : clearPsiEdit(item)" 
                formControlName="psi" />
         <div class="help-block validation-warning" *ngIf="checkControlValidation(item.formGroup.controls.psi)">
           <i class="fa fa-exclamation fa-lg"></i>Please Enter a Valid 2 Letter PSI
         </div>
       </form>
     </div>
   </div>
   

为什么之前的动态控件名方案会报错？ #

你尝试用[formControlName]="item.psi"后访问psiEditForm.controls.item.psi时，TypeScript报错的原因：

• psiEditForm.controls的类型是固定的，TS无法识别你动态添加的、以item.psi为名称的控件，因此提示item不存在于控件集合中。
• 即便用psiEditForm.controls[item.psi]的JS写法，TS依然会因类型不匹配报错，需要额外的类型断言或重构表单结构。

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