Angular8中如何获取Form Array内首个FormControl？

你遇到的问题是因为trunkInterfaces是FormArray类型，直接用[0]访问返回的是AbstractControl，而不是FormGroup，所以无法直接调用get()方法。这里有两种可靠的解决方式：

方法1：使用FormArray的at()方法（推荐） #

FormArray专门提供了at(index)方法来安全获取指定索引的控件，它会返回对应位置的AbstractControl，我们可以将其断言为FormGroup后再获取内部控件：

// 获取第一个trunk组的trunkInterface控件
const trunkInterfaceControl = this.trunkInterfaces.at(0).get('trunkInterface');
// 获取对应值
const trunkInterfaceValue = trunkInterfaceControl?.value;

at()方法是Angular官方推荐的FormArray元素访问方式，比直接操作controls数组更符合表单API的设计规范。

方法2：通过controls数组结合类型断言 #

如果你习惯用数组索引访问，可以先从controls数组取出元素，再断言为FormGroup：

// 先断言首元素为FormGroup，再获取控件
const firstTrunkGroup = this.trunkInterfaces.controls[0] as FormGroup;
const trunkInterfaceControl = firstTrunkGroup.get('trunkInterface');
// 获取值
const trunkInterfaceValue = trunkInterfaceControl?.value;

额外提示：安全访问的最佳实践 #

为了避免数组为空导致的报错，建议先检查FormArray的长度：

if (this.trunkInterfaces.length > 0) {
  const trunkInterfaceControl = this.trunkInterfaces.at(0).get('trunkInterface');
  if (trunkInterfaceControl) {
    // 安全处理控件值
    console.log('Trunk Interface Value:', trunkInterfaceControl.value);
  }
}

这样就能正确访问到trunkInterfaces首行元素的FormControl及其对应值了。

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