Angular14中FormArray使用报错：Cannot read properties of undefined (reading 'get')

在实现动态FormControls的FormArray时触发错误：Cannot read properties of undefined (reading 'get')，核心原因是模板在dayForm初始化完成前，就调用了mondayArray getter方法，此时dayForm仍为undefined。

控制台错误 #

错误关联代码 #

• 红色箭头指向API请求方法：

public async getScheduleData(): Promise<SchemaSchedule> {
let res = this.http.get<SchemaSchedule>(`${this.host}/api/demo-schedule`);
let data = await lastValueFrom(res);
return data;
}

• 蓝色箭头指向getter方法的dayForm.get：

get mondayArray(): FormArray {
        return this.dayForm.get('mondayArray') as FormArray;
      }

• 黄色箭头指向HTML循环部分：

<div
        class="loop_class"
        *ngFor="
         let item of mondayArray.controls;
         index as i
          "
          >

完整相关代码 #

TS代码 #

async ngOnInit() {
    this.scheduleResult = await this.service.getScheduleData();
    this.setDay(
      this.scheduleResult.monday![0]
    );

  }
  async setDay(d1: Duration) {
    this.dayForm = new FormGroup({
      mondayArray: new FormArray([
        new FormGroup({
          startTime: new FormControl(d1.startTime),
          endTime: new FormControl(d1.endTime),
        }),

      ]),
    });
  }
  get mondayArray(): FormArray {
    return this.dayForm.get('mondayArray') as FormArray;
  }

HTML代码 #

<div class="formArray" formArrayName="mondayArray">
                          <div
                            class="loop_class"
                            *ngFor="
                              let item of mondayArray.controls;
                              index as i
                            "
                          >
                            <div class="dynamic_Forms" [formGroupName]="i">
                              <div class="from">
                                <select
                                  name="from"
                                  id="a"
                                  class="text-sm rounded-lg focus:border-primary border border-[#BCBCBC] py-[10px] px-4 focus:outline-none"
                                  formControlName="startTime"
                                  [ngClass]="monState ? '' : 'hidden'"
                                >
                                  <option
                                    [value]="timing.value"
                                    *ngFor="let timing of timingStart"
                                    selected="{{ timing.selected }}"
                                  >
                                    {{ timing.time }}
                                  </option>
                                </select>
                              </div>
                              <div class="divider">
                                <img src="/assets/icons/add.svg" alt="" />
                              </div>
                              <div class="to">
                                <select
                                  name="to"
                                  class="text-sm rounded-lg focus:border-primary border border-[#BCBCBC] py-[10px] px-4 focus:outline-none"
                                  formControlName="endTime"
                                >
                                  <option
                                    [value]="timing.value"
                                    *ngFor="let timing of timingEnd"
                                    selected="{{ timing.selected }}"
                                  >
                                    {{ timing.time }}
                                  </option>
                                </select>
                              </div>
                            </div>
                          </div>
                        </div>

解决方案 #

1. 提前初始化dayForm #

在组件类中先给dayForm赋初始空值，避免undefined状态：

dayForm: FormGroup = new FormGroup({
  mondayArray: new FormArray([])
});

2. 模板添加空值保护 #

在渲染FormArray的容器上添加*ngIf="mondayArray"，确保数组存在后再渲染：

<div class="formArray" formArrayName="mondayArray" *ngIf="mondayArray">
  <div
    class="loop_class"
    *ngFor="let item of mondayArray.controls; index as i"
  >
    <!-- 原有表单内容 -->
  </div>
</div>

3. 优化异步初始化逻辑 #

ngOnInit中的异步操作会延迟dayForm的赋值，通过初始空FormGroup可以避免模板提前访问导致的报错，也可以结合async管道处理异步数据，但前者实现更直接。

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