Angular模板驱动表单中如何动态获取本地引用值用于错误提示？

这个场景我之前开发时也碰到过，模板驱动表单里动态生成控件时，确实不能直接用插值表达式（{{}}）来拼接模板引用变量的名称——因为模板引用变量是在模板编译阶段就确定的，不是运行时动态解析的，所以你原来的写法肯定行不通。

核心思路：利用NgForm的controls集合访问动态控件 #

你的表单已经通过#sample="ngForm"获取了NgForm实例，而每个带ngModel和name属性的输入框，都会自动被加入到NgForm的controls集合中，集合的键就是输入框的name值（也就是你动态生成的obj.sample_name）。基于这个特性，我们可以直接通过表单实例来访问每个动态控件的状态，完全不需要定义动态的模板引用变量。

修正后的代码示例 #

<form class="theme-form" name="sample" #sample="ngForm">
  <div *ngFor="let obj of items">
    <!-- 用属性绑定的方式设置name，比插值更规范 -->
    <input 
      type="text" 
      class="form-control" 
      [(ngModel)]="obj.sampleValue" 
      [name]="obj.sample_name" 
      [range]="[1, 12]"
    >
    <!-- 通过表单的controls集合访问动态控件的错误 -->
    <p *ngIf="sample.controls[obj.sample_name]?.errors?.range">
      输入值必须在1到12之间
    </p>
  </div>
</form>

关键细节说明 #

1. 用[name]="obj.sample_name"替代name={{obj.sample_name}}：属性绑定的方式更符合Angular的模板语法规范，能避免一些潜在的解析问题，比如当obj.sample_name包含特殊字符时的兼容问题。
2. 使用可选链操作符?.：防止页面初始化阶段，控件还未被添加到表单controls集合时，出现Cannot read properties of undefined的错误。
3. 无需动态模板引用变量：原来的#{{obj.sample_name}}="ngModel"完全可以去掉，因为我们已经通过sample.controls[obj.sample_name]拿到了对应的NgModel实例。

如果你的range是自定义验证器，记得确认它已经正确注册到Angular的验证体系中，这样控件的errors对象才会包含range属性哦。

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