Angular表单报错：无法找到指定名称的FormControl

错误原因分析 #

你遇到的Cannot find control with name: 'userInput'和Cannot find control with name: 'moduleName-2-role-30'错误，核心问题在于：

1. 动态生成的角色控件（如moduleName-{{module.module_id}}-role-{{ roles.key}}）未被添加到modulesForm的FormGroup中，Angular无法识别这些动态控件；
2. 虽然你初始化了userInput控件，但如果表单构建时机早于modules和filteredQueues数据加载完成，动态控件会因无数据遍历而缺失。

具体解决步骤 #

1. 动态构建表单控件 #

在TS代码中新增表单构建方法，确保所有静态和动态控件都被添加到FormGroup中：

buildModulesForm() {
  // 初始化静态控件
  const formControls: {[key: string]: FormControl} = {
    userInput: new FormControl('')
  };

  // 遍历模块和角色，动态添加控件
  this.modules?.forEach(module => {
    if (this.filteredQueues) {
      Object.keys(this.filteredQueues).forEach(roleKey => {
        const controlName = `moduleName-${module.module_id}-role-${roleKey}`;
        // 根据activeRoles设置控件初始选中状态
        const initialValue = this.activeRoles.includes(roleKey);
        formControls[controlName] = new FormControl(initialValue);
      });
    }
  });

  // 创建完整的FormGroup
  this.modulesForm = this.fb.group(formControls);
}

2. 确保表单在数据就绪后初始化 #

在modules和filteredQueues数据加载完成后调用表单构建方法，比如在API回调或数据更新后：

ngOnInit() {
  // 假设这里是获取模块数据的API请求
  this.loadModules().subscribe(modules => {
    this.modules = modules;
    // 获取角色队列数据
    this.loadFilteredQueues().subscribe(queues => {
      this.filteredQueues = queues;
      // 数据就绪后构建表单
      this.buildModulesForm();
    });
  });
}

// 如果filteredQueues因搜索动态变化，在搜索方法后重新构建表单
onKeyUpEvent(searchValue: string) {
  // 你的搜索逻辑
  this.filteredQueues = ...;
  // 重新构建表单以更新动态控件
  this.buildModulesForm();
}

3. 简化模板中的控件定义 #

模板中无需用两个nb-checkbox分别处理选中/未选中状态，合并为一个即可：

<nb-checkbox 
  style="padding-right: 1em"
  [checked]="activeRoles.indexOf(roles.key) !== -1"
  formControlName="moduleName-{{module.module_id}}-role-{{ roles.key }}"
  (checkedChange)="selected($event,roles.key)"
  data-toggle="tooltip"
  title="{{getRoleClass(roles) == 'active-roles' ? 'Approved' : (getRoleClass(roles) == 'pending-roles' ? 'Pending' : '')}}"
>
  {{ roles.value }}
</nb-checkbox>

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