Angular 14响应式表单控件赋值的正确写法咨询

首先先修正你提供的原表单代码的语法错误——每个控件的验证器数组末尾缺少闭合的]，正确代码如下：

this.signUpForm = this.fb.group({
  agencyName: ['', [Validators.required]],
  taxId: ['', [Validators.required]],
  address: ['', Validators.required],
  city: ['', Validators.required],
  state: ['', Validators.required],
  zip: ['', Validators.required],
  county: ['', Validators.required],
  firstName: ['', Validators.required],
  lastName: ['', Validators.required],
  mobile: ['', Validators.required],
  phone: [''],
});

接下来分析你给出的两种赋值方式：

• 方式一：this.control = this.signUpForm.controls.state;
  Angular 14及以后版本中出现语法高亮错误，是因为TypeScript对FormGroup的类型检查变得更严格。默认情况下，FormGroup的controls属性没有被明确指定包含哪些控件，TypeScript无法识别state这个属性，因此会抛出类型错误。旧版本中类型检查相对宽松，所以能正常运行。

• 方式二：this.control = this.signUpForm.controls.['state'];
  这是语法错误，.和[]不能连在一起使用，正确的方括号访问写法应为this.signUpForm.controls['state']。不过即使修正语法，在严格类型检查下，依然会遇到和方式一类似的类型问题。

推荐的正确赋值方式 #

1. 为FormGroup定义类型接口（最规范）

通过定义接口明确表单包含的控件类型，让TypeScript能识别每个控件：

import { FormControl } from '@angular/forms';

interface SignUpForm {
  agencyName: FormControl<string>;
  taxId: FormControl<string>;
  address: FormControl<string>;
  city: FormControl<string>;
  state: FormControl<string>;
  zip: FormControl<string>;
  county: FormControl<string>;
  firstName: FormControl<string>;
  lastName: FormControl<string>;
  mobile: FormControl<string>;
  phone: FormControl<string | null>;
}

// 创建表单时指定类型
this.signUpForm = this.fb.group<SignUpForm>({
  agencyName: ['', [Validators.required]],
  taxId: ['', [Validators.required]],
  address: ['', Validators.required],
  city: ['', Validators.required],
  state: ['', Validators.required],
  zip: ['', Validators.required],
  county: ['', Validators.required],
  firstName: ['', Validators.required],
  lastName: ['', Validators.required],
  mobile: ['', Validators.required],
  phone: [''],
});

// 此时可以安全使用点语法
this.control = this.signUpForm.controls.state;

2. 使用类型断言（快速解决）

如果不想定义接口，可以通过类型断言告诉TypeScript控件的类型：

import { FormControl } from '@angular/forms';

// 方括号访问+类型断言
this.control = this.signUpForm.controls['state'] as FormControl;

// 或者使用FormGroup的get方法（更推荐）
this.control = this.signUpForm.get('state') as FormControl;

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