Angular中如何通过动态字符串访问表单DOM元素并设置有效性？

嘿，这个场景太常见了！当表单控件名称是动态生成的字符串时，确实没法直接用.语法访问，不过Angular提供了两种简单的方式来搞定这个问题，分模板驱动表单和响应式表单两种情况来说：

一、模板驱动表单（你例子里用的form.nme112.$setValidity属于这种） #

Angular的模板驱动表单对象本质上是一个类似JavaScript对象的结构，所以可以用方括号语法通过字符串来访问对应的控件。

举个具体的例子：
假设你在控制器里已经拿到了动态生成的控件名字符串，比如const controlName = 'nme112';，直接这样写就行：

// 假设你的表单在$scope里叫myForm
$scope.myForm[controlName].$setValidity('required', false);

完整的控制器代码示例：

app.controller('YourController', function($scope) {
  // 模拟运行时获取到的动态控件名
  const dynamicControlName = 'nme112';

  // 在合适的时机（比如某个用户操作后）设置控件无效
  $scope.markControlInvalid = function() {
    // 用方括号访问动态命名的控件
    const targetControl = $scope.myForm[dynamicControlName];
    if (targetControl) {
      targetControl.$setValidity('required', false);
      // 如果需要同步视图状态，还可以调用$setDirty()
      targetControl.$setDirty();
    }
  };
});

二、响应式表单（Reactive Forms） #

如果是用Angular较新的响应式表单，就更简单了，直接用FormGroup的get()方法传入控件名字符串即可：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-dynamic-form',
  template: `
    <form [formGroup]="dynamicForm">
      <select [formControlName]="generatedControlId"></select>
    </form>
  `
})
export class DynamicFormComponent implements OnInit {
  dynamicForm!: FormGroup;
  generatedControlId = 'nme112'; // 动态生成的控件名

  ngOnInit() {
    this.dynamicForm = new FormGroup({
      [this.generatedControlId]: new FormControl('', Validators.required)
    });
  }

  setControlInvalid() {
    const controlName = 'nme112';
    const targetControl = this.dynamicForm.get(controlName);
    if (targetControl) {
      // 设置无效状态，同时添加错误信息
      targetControl.setErrors({ required: true });
      // 或者如果只是标记为无效，保留原有错误：targetControl.markAsInvalid();
    }
  }
}

注意事项 #

• 确保操作时表单已经初始化完成，比如在ngAfterViewInit（模板驱动）或ngOnInit（响应式）之后执行，或者在用户触发的事件（比如按钮点击）里操作，避免出现undefined的情况。
• 如果控件可能不存在，最好加个判断（比如上面例子里的if (targetControl)），防止报错。

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