Angular中FormArray结合mat-datepicker无法正常工作求助

问题背景 #

开发Angular动态表单时，基于FormArray管理表单控件，其中包含一个mat-datepicker作为FormControl。点击选择日期后控件值无更新，控制台无任何报错，无法定位是Angular限制还是配置遗漏。

解决方案（来自@Eliseo） #

核心问题在于动态生成mat-datepicker时，重复的模板引用变量或表单控件绑定方式错误导致组件无法正确关联，以下是关键修复点：

• 确保每个动态生成的mat-datepicker使用唯一的模板引用变量
  当通过*ngFor循环渲染表单项时，每个mat-datepicker和对应的mat-datepicker-toggle需要绑定唯一的引用，避免所有控件指向同一个实例：

  <div *ngFor="let item of formArray.controls; let i = index" [formGroupName]="i">
    <mat-form-field>
      <input matInput [matDatepicker]="picker_{{i}}" formControlName="date">
      <mat-datepicker-toggle matSuffix [for]="picker_{{i}}"></mat-datepicker-toggle>
      <mat-datepicker #picker_{{i}}></mat-datepicker>
    </mat-form-field>
  </div>
  

• 确认表单控件初始化正确
  在组件类中，向FormArray添加控件时，需确保每个控件都正确初始化为FormControl：

  addFormItem(): void {
    (this.form.get('items') as FormArray).push(
      new FormGroup({
        date: new FormControl(null)
      })
    );
  }
  

• 避免混淆表单绑定方式
  如果在循环中直接绑定控件实例，使用[formControl]="item.get('date')"而非formControlName，确保绑定的是当前循环项的正确控件：

  <div *ngFor="let item of formArray.controls; let i = index">
    <mat-form-field>
      <input matInput [matDatepicker]="picker_{{i}}" [formControl]="item.get('date')">
      <mat-datepicker-toggle matSuffix [for]="picker_{{i}}"></mat-datepicker-toggle>
      <mat-datepicker #picker_{{i}}></mat-datepicker>
    </mat-form-field>
  </div>
  

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