Angular12动态FormArray更新时报Cannot set properties of undefined错误如何解决

错误原因 #

1. 你的组件类中没有声明employee属性，mapFormValueForContactModel方法里访问this.employee时是undefined，给undefined的属性赋值就会触发你遇到的类型错误。
2. 表单里定义的联系人数组控件名为contacts，你取值时误用了employeecontacts，拿不到对应的数据。
3. 你提交更新时传给接口的参数是contactdata，本就应该把表单值赋值给已经从接口获取到数据的contactdata对象，而不是不存在的employee。

修复方案 #

1. 修改mapFormValueForContactModel方法

mapFormValueForContactModel() {
  this.contactdata.first_name = this.contactInfoForm.value.first_name;
  this.contactdata.employeecontacts = this.contactInfoForm.value.contacts;
}

2. 修复其他潜在问题

• 你的HTML模板里调用了getContactsFormArray()方法，但组件里没有定义，要么在组件里补充这个方法：

getContactsFormArray(): FormArray {
  return this.contacts;
}

要么把HTML里的let contact of getContactsFormArray().controls改成let contact of contacts.controls，和你组件里定义的contacts getter对应即可。

• 你在ngOnInit里把isLoading设为true，但加载完员工数据后没有重置为false，会导致提交按钮一直禁用，在loadContactById的subscribe回调最后加一行this.isLoading = false即可。

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