Angular表单数组报错：无法读取未定义的'ItemName'属性

安全阿岳

2026-8-19

Angular表单访问FormArray控件报错解决

错误原因

你直接通过this.InvoiceForm.InvoiceItem访问表单数组是错误的——Angular的FormGroup子控件不会直接暴露为实例属性，必须通过get()方法获取对应的FormArray对象，直接访问会得到undefined，后续读取ItemName自然触发类型错误。

解决方案

方法1：在Save方法中直接获取FormArray并访问控件

修改Save方法，先通过get()获取InvoiceItem表单数组，再转换为FormArray类型，之后取对应索引的FormGroup，最后读取控件值：

Save() {
  console.log(this.InvoiceForm.value);
  
  // 正确获取InvoiceItem表单数组
  const invoiceItems = this.InvoiceForm.get('InvoiceItem') as FormArray;
  // 获取第一个表单组的ItemName值（方式1）
  const firstItemName = invoiceItems.at(0).get('ItemName')?.value;
  // 获取第一个表单组的ItemName值（方式2，直接取表单组的value）
  const firstItemValue = invoiceItems.at(0).value.ItemName;
  console.log(firstItemName);
}

方法2：定义getter简化访问（推荐）

在组件中添加一个getter方法，专门获取InvoiceItem表单数组，后续可以重复使用：

get invoiceItemArray(): FormArray {
  return this.InvoiceForm.get('InvoiceItem') as FormArray;
}

// 然后修改Save方法
Save() {
  console.log(this.InvoiceForm.value);
  
  // 通过getter访问
  const firstItemName = this.invoiceItemArray.at(0).get('ItemName')?.value;
  console.log(firstItemName);
}