Angular中如何在*ngFor循环里动态访问FormControl

先看你代码里的几个问题，对应调整就能解决：

• 模板里不要用this.：Angular模板中访问组件类的属性直接写变量名就行，把*ngFor="let item of this.formFieldsToCheck | keyvalue"改成*ngFor="let item of formFieldsToCheck | keyvalue"。
• 安全访问FormControl：如果formFieldsToCheck里的key有可能不在表单控件中，直接访问myFormGroup.controls[item.key].invalid会报错，用可选链操作符?.避免这种情况：myFormGroup.controls[item.key]?.invalid。
• 优化错误触发时机：默认表单初始化后invalid就为true，但通常我们希望用户触摸或修改字段后再显示错误，所以可以加上touched或dirty判断，比如myFormGroup.controls[item.key]?.invalid && myFormGroup.controls[item.key]?.touched。

修正后的完整代码：

<ul *ngIf="myFormGroup.invalid">
  <ng-container *ngFor="let item of formFieldsToCheck | keyvalue" >
    <li *ngIf="myFormGroup.controls[item.key]?.invalid && myFormGroup.controls[item.key]?.touched"> {{item.value}} </li>
  </ng-container>
</ul>

另外要确保你的formFieldsToCheck是正确的键值对结构，比如在组件类里定义成这样：

formFieldsToCheck = {
  'username': '用户名不能为空且格式错误',
  'email': '邮箱格式不正确',
  'password': '密码长度不能少于6位'
};

这里的key要和你FormGroup里定义的控件名称完全一致，不然找不到对应的控件。

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