Angular循环内表单formControlName绑定总显示最后一项如何解决

问题根源 #

• 所有循环生成的表单都绑定了同一个FormGroup实例，多个表单共享一套表单控制字段，后渲染的项会覆盖先渲染项的绑定值，最终只会保留最后一项的内容。
• 响应式表单（formGroup/formControlName）和模板驱动的[(ngModel)]混合使用是Angular不推荐的写法，二者的状态管理逻辑冲突，会导致绑定异常。
  你遇到的TS2339报错是因为尝试给formControlName设置动态值时，动态生成的键名不存在于你预先定义的nameForm的字段中，自然找不到对应的属性。

解决方案 #

方案一：使用FormArray管理多表单（推荐，完全使用响应式表单） #

每个菜单项对应独立的FormGroup，用FormArray统一管理，完全抛弃[(ngModel)]绑定。

组件侧代码修改

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

// 把单FormGroup改成FormArray
public menuFormArray: FormArray;
public menus: any[] = [];

constructor(private _AdminmenuService:AdminmenuService, private formBuilder: FormBuilder) {}

ngOnInit() {
  // 假设此处是你获取菜单列表的逻辑
  this._AdminmenuService.getMenuList().subscribe(res => {
    this.menus = res;
    // 为每个菜单生成对应的FormGroup
    this.menuFormArray = this.formBuilder.array(
      this.menus.map(menu => this.formBuilder.group({
        title: [menu.title, Validators.required],
        description: [menu.description, Validators.required],
        image: [menu.image, Validators.required]
      }))
    )
  })
}

// 提交时传入索引获取对应表单
onSubmit(index: number) {
  const currentForm = this.menuFormArray.at(index) as FormGroup;
  if (!currentForm.valid) return;
  const submitData = currentForm.value;
  // 此处补充你的提交逻辑，对应修改menus[index]的内容即可
}

// 文件选择也传入索引绑定对应表单的image字段
onSelectedFile(event: Event, index: number) {
  const file = (event.target as HTMLInputElement).files?.[0];
  if (file) {
    this.menuFormArray.at(index).get('image')?.setValue(file);
  }
}

模板侧代码修改

<div *ngFor="let menu of menus; let i = index" [formGroup]="menuFormArray.at(i)">
  <form (ngSubmit)="onSubmit(i)" style="padding: 20px; display:flex; justify-content:center; flex-direction: column;" enctype="multipart/form-data">
    <mat-form-field appearance="fill">
      <mat-label>Title</mat-label>
      <input matInput placeholder="{{menu.title}}" formControlName="title" required>
    </mat-form-field>
    <mat-form-field appearance="fill">
      <mat-label>Description</mat-label>
      <textarea matInput formControlName="description" placeholder="example: All of our pizzas are amazing" required></textarea>
    </mat-form-field>
    <br>
    <label>Image of menu *</label>  
    <img src="{{url + 'menu/get-image/' + menu.image}}" style="height:150px;" />
    <input type="file" name="image" (change)="onSelectedFile($event, i)" required/>
    <br>
    <input type="submit" class="submit" value="SEND"
      [disabled]="!menuFormArray.at(i).valid" style="border:none; background:#181818; height: 40px; color: #f1f1f1; font-size: 22px;" />
  </form>
</div>

方案二：全用模板驱动表单（更轻量，代码更少） #

完全抛弃响应式表单的FormGroup/formControlName，只使用ngModel绑定，适合表单逻辑简单的场景。

组件侧修改

删除所有nameForm相关的响应式表单代码即可。

模板侧修改

<div *ngFor="let menu of menus; let i = index">
  <form #updateMenu="ngForm" (ngSubmit)="onSubmit(updateMenu, menu)" style="padding: 20px; display:flex; justify-content:center; flex-direction: column;" enctype="multipart/form-data">
    <mat-form-field appearance="fill">
      <mat-label>Title</mat-label>
      <input matInput placeholder="{{menu.title}}" name="title" [(ngModel)]="menu.title" required>
    </mat-form-field>
    <mat-form-field appearance="fill">
      <mat-label>Description</mat-label>
      <textarea matInput name="description" [(ngModel)]="menu.description" placeholder="example: All of our pizzas are amazing" required></textarea>
    </mat-form-field>
    <br>
    <label>Image of menu *</label>  
    <img src="{{url + 'menu/get-image/' + menu.image}}" style="height:150px;" />
    <input type="file" name="image" (change)="onSelectedFile($event, menu)" required/>
    <br>
    <input type="submit" class="submit" value="SEND"
      [disabled]="!updateMenu.valid" style="border:none; background:#181818; height: 40px; color: #f1f1f1; font-size: 22px;" />
  </form>
</div>

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