如何在TypeScript中用变量指向嵌套FormGroup简化代码？

你说得太对了，反复写<FormGroup>.controls['xxx'].controls['xxx']这种嵌套写法确实又丑又繁琐，完全可以用变量来简化这个过程。下面我给你两种常用的实现方式，都是Angular开发里很常用的技巧：

方法一：直接定义变量并初始化 #

在组件类里先声明对应类型的变量，然后在表单初始化完成后，把嵌套的FormGroup赋值给这些变量就行。注意要加类型断言，因为get()或controls返回的是AbstractControl类型，我们需要明确告诉TypeScript这是一个FormGroup。

举个多层嵌套的例子：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-nested-form',
  templateUrl: './nested-form.component.html'
})
export class NestedFormComponent implements OnInit {
  // 父表单
  parentForm: FormGroup;
  // 指向第一层嵌套的FormGroup
  addressForm: FormGroup;
  // 指向第二层嵌套的FormGroup
  contactForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    // 初始化带嵌套结构的表单
    this.parentForm = this.fb.group({
      userName: [''],
      address: this.fb.group({
        street: [''],
        city: [''],
        contact: this.fb.group({
          phone: [''],
          email: ['']
        })
      })
    });

    // 赋值嵌套FormGroup，用as FormGroup做类型断言
    this.addressForm = this.parentForm.get('address') as FormGroup;
    this.contactForm = this.addressForm.get('contact') as FormGroup;
  }

  // 现在访问嵌套控件就简洁多了
  submitForm(): void {
    console.log('街道:', this.addressForm.get('street')?.value);
    console.log('邮箱:', this.contactForm.get('email')?.value);
  }
}

方法二：用Getter属性动态获取 #

如果不想在ngOnInit里手动赋值，还可以用getter属性，它会在你访问的时候动态获取嵌套FormGroup，代码更简洁，也不用考虑初始化时机：

// 替换上面的变量声明部分，改成getter
get addressForm(): FormGroup {
  return this.parentForm.get('address') as FormGroup;
}

get contactForm(): FormGroup {
  return this.addressForm.get('contact') as FormGroup;
}

这样不管什么时候访问this.addressForm，都会自动从父表单里获取最新的嵌套FormGroup，非常方便。

模板里也能直接用这些变量 #

不仅在TS文件里，模板里也可以直接用这些变量来简化写法（不过模板里通常还是用formGroupName来关联，但如果需要做一些动态判断，变量也能派上用场）：

<form [formGroup]="parentForm">
  <input formControlName="userName" placeholder="用户名">

  <div formGroupName="address">
    <input formControlName="street" placeholder="街道">
    <input formControlName="city" placeholder="城市">

    <div formGroupName="contact">
      <input formControlName="phone" placeholder="电话">
      <input formControlName="email" placeholder="邮箱">
    </div>
  </div>

  <button (click)="submitForm()">提交</button>
</form>

两种方法都能完美解决你说的冗余问题，个人更推荐getter的写法，因为它不需要手动维护变量的赋值状态，代码更干净。

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