Angular自定义校验组件场景下，循环内动态插值参数未正确传值的问题

这类传值失效的核心原因来自Angular模板的固定解析规则：
当使用方括号[]标记属性绑定时，方括号包裹的整个内容会被直接识别为TypeScript表达式求值，这个区域内部的双大括号{{}}不会被插值引擎解析，会被当做普通字符串字面值处理。
对比场景里label文本、无方括号的formControlName位置能正常解析{{attribute.attributeName}}，是因为这些位置属于插值解析的正常作用域；一旦进入明确的方括号绑定表达式作用域，嵌在内部的插值语法就会完全失效。
之前写法里的'{{attribute.attributeName}}'，本质是把带大括号的文本作为普通字符串字面值传给了方法，Angular不会对这个字符串内部的内容做插值替换，自然会收到未解析的原始字符串。

核心原则：在方括号的属性绑定表达式中，直接通过合法的TS表达式引用动态值，完全去掉内部嵌套的双大括号插值。

常见错误写法（对照排查） #

<!-- 错误：绑定表达式内部嵌套插值 -->
<app-validate
  [errorInput]="isValid('{{attribute.attributeName}}')"
  [errorMessage]="displayErrorMessage('{{attribute.attributeName}}')"
>
</app-validate>

基础正确写法 #

• 直接把当前遍历项的控件名作为参数传入方法，去掉外层的单引号和大括号，将attribute.attributeName作为表达式的参数直接传入：

<app-validate
  [errorInput]="isValid(attribute.attributeName)"
  [errorMessage]="displayErrorMessage(attribute.attributeName)"
>
</app-validate>

这种写法下，attribute.attributeName是*ngFor循环上下文里的合法属性引用，会被模板解析器直接求值为真实的控件名字符串，传入方法的参数就是预期的动态值。

• 如果方法参数需要搭配固定字面值拼接动态值，直接使用原生字符串拼接逻辑实现，不要嵌插值：

<app-validate
  <!-- 例：给控件名加固定前缀拼接成完整的校验key -->
  [errorInput]="isValid('dynamic_' + attribute.attributeName)"
  [errorMessage]="displayErrorMessage('dynamic_' + attribute.attributeName)"
>
</app-validate>

动态表单场景优化实践 #

基于*ngFor遍历配置列表渲染动态表单的场景，完全可以跳过传控件名查询的逻辑，直接把当前表单项的FormControl实例作为参数传入校验逻辑，减少无意义的查找开销：

• 循环内绑定input控件时，直接从FormGroup实例中获取对应的FormControl
• 给app-validate组件传值时，直接读取控件的实时状态与错误信息：

<app-validate
  [errorInput]="dynamicForm.controls[attribute.attributeName]?.invalid && dynamicForm.controls[attribute.attributeName]?.touched"
  [errorMessage]="dynamicForm.controls[attribute.attributeName]?.errors | validateErrorPipe"
>
</app-validate>

这种写法既规避了动态值传参不匹配的问题，也减少了每次调用方法时通过控件名遍历查找FormGroup实例的性能损耗。

补充通用规则：所有带双大括号的插值语法，仅能出现在模板文本节点位置、或者无方括号标记的属性位置（此时Angular会自动隐式将其转化为属性绑定），永远不要在方括号标记的绑定表达式内部嵌套双大括号，否则一定会出现解析失效的问题。

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