如何解决Angular中push is not a function错误

错误原因 #

你调用push方法的对象不是FormArray类型——Angular里只有FormArray控件提供push方法，而this.signupForm.get(...)返回的是FormControl或null，自然没有push方法，所以触发报错。

修复步骤 #

1. 确保目标字段是FormArray类型
   在初始化表单时，要把需要动态添加项的字段声明为FormArray，示例代码：

   import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
   
   constructor(private fb: FormBuilder) {}
   
   signupForm: FormGroup = this.fb.group({
     // 其他表单字段...
     // 声明一个可动态添加的地址数组控件
     addresses: this.fb.array([
       // 初始化一个默认的地址表单组
       this.fb.group({
         street: [''],
         city: ['']
       })
     ])
   });
   

2. 封装FormArray的getter（推荐）
   为避免重复的类型断言，封装一个getter来获取目标FormArray：

   get addresses(): FormArray {
     return this.signupForm.get('addresses') as FormArray;
   }
   

3. 正确调用push方法
   通过封装的getter调用push添加新的表单组：

   addNewAddress() {
     this.addresses.push(this.fb.group({
       street: [''],
       city: ['']
     }));
   }
   

额外检查 #

• 确认你要操作的表单字段确实是数组类型，而非单个输入控件（比如普通input对应的FormControl）
• 调用get方法时的字段名要和表单初始化时的字段名完全一致

内容的提问来源于stack exchange，提问作者Hồ Đỗ