Angular 12中FormArray调用push报错：push is not a function

你在Angular 12中实现响应式表单时，点击添加爱好按钮出现以下错误：

ERROR TypeError: this.getHobbies().push is not a function

问题出在FormArray的初始化方式上。在initForm方法里，你给hobbies字段赋值时错误地用数组包裹了formBuilder.array()：

hobbies: [this.formBuilder.array([])]

这种写法会把FormArray包装成一个普通的FormControl，而非直接将字段设置为FormArray类型。当调用getHobbies()时，拿到的是FormControl实例，它没有push方法，因此触发报错。

修正方案 #

把hobbies的初始化代码改成直接赋值FormArray，去掉外层的方括号：

initForm(): void {
  this.userForm = this.formBuilder.group({
    firstName: ['', Validators.required],
    lastName: ['', Validators.required],
    email: ['', [Validators.required, Validators.email]], // 补充：多个验证器需放入数组，原写法存在潜在问题
    drinkPreference: ['', Validators.required],
    hobbies: this.formBuilder.array([]) // 移除外层方括号
  });
}

另外补充：原代码中email字段的验证器写法有误，多个验证器必须放在同一个数组内，否则第二个验证器会被当作异步验证器处理，可能引发其他问题，上述代码已一并修正。

修改后，getHobbies()就能正确返回FormArray实例，调用push方法添加新控件即可正常工作。

内容的提问来源于stack exchange，提问作者Marc Le Bihan