Angular中如何为表单组(Form Group)的每个字段设置ID？

你不能像示例里那样在formBuilder.group的字段配置中设置id属性。因为Angular的FormControl构造器的第二个参数只接受验证器（Validators）或者包含validators、asyncValidators、updateOn的配置对象，并不支持直接传入id这类DOM元素属性。

正确的做法是在模板中的输入框元素上直接设置id，或者通过组件类统一绑定管理：

直接在模板设置ID #

<form [formGroup]="contactForm">
  <input type="text" formControlName="firstname" id="input-firstname-1">
  <input type="text" formControlName="lastname" id="input-lastname-2">
  <input type="email" formControlName="email" id="input-email-3">
</form>

组件类统一管理ID（推荐） #

如果需要在组件类里统一维护这些ID，可以先定义一个存储ID的对象：

// 组件类中
inputIds = {
  firstname: 'input-firstname-1',
  lastname: 'input-lastname-2',
  email: 'input-email-3'
};

this.contactForm = this.formBuilder.group({
  firstname: [''],
  lastname: [''],
  email: ['']
});

然后在模板中绑定ID：

<form [formGroup]="contactForm">
  <input type="text" formControlName="firstname" [id]="inputIds.firstname">
  <input type="text" formControlName="lastname" [id]="inputIds.lastname">
  <input type="email" formControlName="email" [id]="inputIds.email">
</form>

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