Angular中FormArray内beginTime控件的mat-error访问问题求助

你遇到的Cannot read property 'hasError' of null错误，根源是在模板里直接用workTiming.get('beginTime')尝试访问控件——FormArray本身是一组FormGroup集合，不能直接通过控件名拿到内部的beginTime，必须先定位到当前循环的那个FormGroup实例，再去获取它里面的控件。

下面给你两种可行的解决方式：

方法一：直接在模板中通过循环项访问控件 #

修改mat-error的判断逻辑，把workTiming.get('beginTime')替换成item.get('beginTime')。这里的item就是*ngFor循环到的当前FormGroup实例，直接调用它的get方法就能精准拿到对应的beginTime控件：

<div formArrayName="workTiming" >
  <div *ngFor="let item of workTiming.controls; let pointIndex=index" [formGroupName]="pointIndex">
    <div class="container">
      <mat-form-field class="responsive">
        <input type="time" required formControlName="beginTime" matInput placeholder="Begin Time">
        <mat-error *ngIf="item.get('beginTime').hasError('required')">
          Enter begin time
        </mat-error>
      </mat-form-field>
    </div>
  </div>
</div>

方法二：在组件中添加辅助方法（更易维护） #

如果你的表单逻辑比较复杂，或者希望模板代码更简洁，可以在组件类里定义一个辅助方法，专门用来获取FormArray中指定位置的控件：

首先，确保你已经为workTiming定义了getter（方便模板直接访问）：

get workTiming(): FormArray {
  return this.locationForm.get('workTiming') as FormArray;
}

然后添加获取控件的方法：

getWorkTimingControl(index: number, controlName: string): FormControl {
  return this.workTiming.at(index).get(controlName) as FormControl;
}

最后在模板里调用这个方法即可：

<div formArrayName="workTiming" >
  <div *ngFor="let item of workTiming.controls; let pointIndex=index" [formGroupName]="pointIndex">
    <div class="container">
      <mat-form-field class="responsive">
        <input type="time" required formControlName="beginTime" matInput placeholder="Begin Time">
        <mat-error *ngIf="getWorkTimingControl(pointIndex, 'beginTime').hasError('required')">
          Enter begin time
        </mat-error>
      </mat-form-field>
    </div>
  </div>
</div>

这两种方法都能正确定位到FormArray内的beginTime控件，解决你遇到的错误。

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