如何在Angular的HTML文件中通过控件名称列表验证表单控件有效性？

你需要通过方括号语法动态访问表单控件，因为item是字符串变量，点语法（f.item）无法识别动态的控件名称。同时formControlName作为输入属性，直接绑定变量即可，不需要插值表达式。

修改后的代码： #

.ts 文件（可优化初始化逻辑）

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

// ...

this.form = this.formBuilder.group({
   item0: ['', Validators.required],
   item1: ['', Validators.required]
});

// 直接初始化数组，比多次push更简洁
formControls: string[] = ['item0', 'item1'];

.html 文件

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <div *ngFor="let item of formControls">
    <!-- 直接绑定formControlName，无需插值 -->
    <input [formControlName]="item"
           [ngClass]="{ 'is-invalid': form.controls[item].invalid && form.controls[item].touched }"/>
    <label>{{item}}</label>
    <!-- 用form.get(item)获取控件，结合可选链避免空值报错 -->
    <div *ngIf="form.get(item)?.errors && form.get(item)?.touched" class="invalid-feedback"> 
      <div *ngIf="form.get(item)?.errors.required">
        {{item}} 为必填项
      </div>
    </div>
  </div>
</form>

关键说明： #

• 动态访问控件：使用form.controls[item]或form.get(item)，两者都能通过字符串名称获取对应的FormControl实例。
• 验证状态判断：结合touched（控件被触碰过）状态，避免页面加载时就显示错误提示，提升用户体验。
• 可选链操作符?.：防止控件未定义时抛出空值错误，Angular 12+支持该语法。

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