AngularJS同名表单项下仅为单个元素添加input-txtgray类

你贴的this.inputmy_input_name[id] = 'input-txtgray';完全不是Angular的标准语法。
这是原项目开发时自行在组件类上挂载的普通JS对象，仅用来临时存储类名字符串，本身没有和模板内的真实DOM建立绑定关联。之前的逻辑失效本质是：原代码没有在模板侧为每个自动生成的输入框，匹配上这个对象里存储的类值，哪怕修改了对象内的存储内容，页面DOM的类名也不会同步更新，自然无法在多个同名my_input_name元素中精准定位到目标项。

以下方案均不需要大范围调整自动生成表单项的核心流程，可直接落地：

• 基于触发元素做就近DOM定位（改动最小）
  你需要修改的目标是“触发本次调用的元素旁的对应my_input_name输入框”，完全不需要依赖原失效的对象存储逻辑。只要在事件触发的处理函数中接收原生事件对象event，以当前触发的DOM节点为基准，在相邻的DOM作用域范围内查找目标输入框，就能实现精准命中。
  参考实现代码：

  handleTriggerAction(event: Event) {
    // 获取当前触发事件的元素
    const triggerElement = event.currentTarget as HTMLElement;
    // 根据实际页面结构向上查找，定位到同时包含触发元素和目标输入框的最近父容器
    const commonParent = triggerElement.closest('.auto-generated-form-row');
    if (!commonParent) return;
    // 在局部父容器范围内查找同名输入框，不会匹配到其他区域的同名字段
    const targetInput = commonParent.querySelector('input[name="my_input_name"]') as HTMLInputElement;
    targetInput?.classList.add('input-txtgray');
  }
  

• 补全原有自定义逻辑的绑定缺口
  如果不想调整现有事件的传参流程，可以找到自动生成表单项的模板代码片段，给每个生成的输入框元素补上对应的类绑定，让类名和原有自定义对象的存储值挂钩。例如把输入框的class属性修改为：

  <input 
    name="my_input_name" 
    [class.input-txtgray]="inputmy_input_name[currentItem.id]"
  />
  

  只要保证触发赋值时传入的id和每个生成项的唯一标识一一对应，原来的存储逻辑就能正常生效，不需要改动表单项自动生成的核心业务逻辑。
• 轻量引入模板引用避免冲突
  可以在自动生成输入框的环节，给每个元素增加一个无业务侵入的模板引用变量，触发逻辑通过组件的ViewChild查询对应引用的节点，直接为其添加目标类，不会和其他同名的输入元素产生匹配冲突。

注意：操作DOM类名时尽量避免直接重写元素的className属性，优先使用classList方法，防止覆盖其他已有类名导致样式异常。

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