如何在ngFor渲染的表格中正确编写绑定NgModel的每行独立表单

问题根源 #

你所有行的表单控件都绑定到了全局唯一的upadateform对象上，修改任意一行的输入本质都是修改同一个对象的属性，所以会出现所有行同步变化的问题。

修复方案 #

第一步 修改component.ts代码 #

给每个学生数据绑定独立的表单对象，提交时直接传递当前行的表单数据：

// 建议先定义Contact类型，这里用any做示例
contacts: any[] = [];

constructor(
  private contactsService : contactsService,
  private absenceService : absenceService
) { }

ngOnInit(): void {
  this.contactsService.fetchAll()
    .subscribe(
      res => {
        // 给每个学生初始化独立的缺勤表单，避免全局共用
        this.contacts = res.map(contact => ({
          ...contact,
          absenceForm: {
            dc_docjustificatif: File = null,
            dc_student: contact.id, // 直接绑定当前学生ID，上报时无需额外赋值
            dc_status: null,
            dc_description:''
          }
        }))
      }
    )
}

// 接收当前行的独立表单作为参数提交
addAbsence(absenceForm: any){
  this.absenceService.postAbsence(absenceForm)
  .subscribe(
    res => {
      console.log(res)
      // 提交成功后可重置当前行表单
      absenceForm.dc_status = null
      absenceForm.dc_description = ''
    },
    err => {
      console.log(err);
    }
  )     
};

第二步 修改component.html代码 #

将所有表单控件的绑定路径替换为当前行学生独立的表单对象，同时补充单选框ID的唯一标识避免DOM冲突，提交时传递对应表单：

<div class="card" *ngFor="let contact of contacts ; let i = index">
  <div class="card-header" id="headingOne"  *ngIf="contact._dc_class_value==='81745753-a826-ec11-b6e5-002248131c68'">
    <form #absenceform="ngForm" enctype="multipart/form-data" >
      <div class="row ">
        <!--Execution-->
        <div class="col-1 mt-2">
          {{i-1}}
        </div> 
        <div   class="col-3 mt-2"> 
          {{contact.fullname}}
        </div>
        <div class="col-2 mt-2">
          CL1_Pro1
        </div>
        <div class="col-1  mt-2  ml-3">
          <input [(ngModel)]="contact.absenceForm.dc_status" [value]="100000000"  class="form-check-input" type="radio" name="exampleRadios{{i}}" id="exampleRadios1{{i}}" value="option1" >
        </div>
        <div class="col-1 mt-2 ml-3">
          <input class="form-check-input" type="radio" name="exampleRadios{{i}}" id="exampleRadios2{{i}}" value="option2" >
        </div>
        <div class="col-1 mt-2 ml-3">
          <input [(ngModel)]="contact.absenceForm.dc_status"  [value]="100000002" class="form-check-input" type="radio" name="exampleRadios{{i}}" id="exampleRadios3{{i}}" value="option3" >
        </div>
        <div class="col-2 mt-2">
          <input name="Name{{ i }}" id="Name{{ i }}"
          class="input-group input-group-sm" width="50%" [(ngModel)]="contact.absenceForm.dc_description">
        </div>
        <button (click)="addAbsence(contact.absenceForm)" class="mt-2 btn btn-danger shape float-right">
          Save
        </button>
      </div>
    </form>
  </div>
</div>

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