Angular响应式表单中formGroup.get与formGroup.controls的选择偏好

嘿，这个问题问得很到位！你观察得没错——myForm.controls['name'].valid和myForm.get('name').valid在表单验证的实际效果上确实完全一致，但从代码的健壮性、可维护性以及Angular社区的最佳实践来看，更推荐使用myForm.get('name')，具体原因我给你拆解下：

• 支持嵌套控件的简洁访问：如果你的表单包含嵌套的表单组或表单数组，get()方法可以直接通过点分隔的路径查询控件，比如myForm.get('user.address.city')；而用controls的话，你得一层层嵌套访问：myForm.controls['user'].controls['address'].controls['city']，层级越多代码越臃肿，可读性大打折扣。
• 更安全的空值处理：当表单控件可能被动态添加或移除时，get()会在控件不存在时返回null，搭配可选链操作符?.就能避免报错（比如myForm.get('name')?.valid）；而直接访问controls['name']如果控件不存在，会直接抛出Cannot read properties of undefined的错误，导致页面崩溃。
• 符合官方最佳实践：Angular官方文档的示例中更倾向于使用get()方法，这也是社区普遍认可的代码风格，团队协作时能减少不必要的风格分歧。

基础用法对比示例 #

原写法（使用controls）

<label>Name <input type="text" formControlName="name"> </label>
<div class="alert" *ngIf="!myForm.controls['name'].valid && myForm.controls['name'].touched">
  {{ titleAlert }}
</div>

推荐写法（使用get()）

<label>Name <input type="text" formControlName="name"> </label>
<div class="alert" *ngIf="!myForm.get('name')?.valid && myForm.get('name')?.touched">
  {{ titleAlert }}
</div>

嵌套表单组场景示例 #

假设你的表单结构包含嵌套组：

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

// 组件类中定义表单
myForm: FormGroup;

constructor(private fb: FormBuilder) {
  this.myForm = this.fb.group({
    user: this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]]
    })
  });
}

• 用controls访问嵌套控件：

<div class="alert" *ngIf="!myForm.controls['user'].controls['name'].valid && myForm.controls['user'].controls['name'].touched">
  姓名不能为空
</div>

• 用get()访问嵌套控件（更简洁）：

<div class="alert" *ngIf="!myForm.get('user.name')?.valid && myForm.get('user.name')?.touched">
  姓名不能为空
</div>

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