Angular 12中FormArray取值最佳实践及相关问题咨询

你当前使用的getter返回FormArray的写法本身就是Angular FormArray的官方推荐最佳实践，比你最初在模板中直接调用thirdFormGroup.get('clients').controls的写法优势很明显：

• 避免模板中重复写长路径的取值逻辑，代码可读性更高
• 规避模板中调用get()方法触发频繁变更检测带来的额外性能开销
• 统一在TS层做类型断言，模板不需要额外处理类型问题，也能让TS提前做语法校验，避免运行时报错

你现在的代码可以做几个小调整更规范：

1. 修正getter的命名和实际表单字段对应，同时修正你当前代码里的笔误（你当前的表单实例是thirdFormGroup不是form），调整后代码如下：

// TS文件
get clients(): FormArray {
  return this.thirdFormGroup.get('clients') as FormArray;
}

2. 简化addClient方法的逻辑，直接调用上面的getter操作，不需要额外声明临时变量：

addClient(): void {
  this.clients.push(this.createUser());
}

3. 模板里直接遍历clients.controls即可，写法不需要再调整，这是最简洁的实现：

<div formArrayName="clients">
  <div *ngFor="let client of clients.controls; let i = index" [formGroupName]="i">
    <!-- 表单项内容 -->
  </div>
</div>

如果后续升级到Angular14及以上版本，可以直接使用Angular官方提供的Typed Form（类型化表单），不需要手动写类型断言，能从根上避免FormArray相关的类型错误，是更高阶的最佳实践。

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