Angular 4基于现有组件模块动态加载模板遇表单绑定问题

这问题太常见了！你碰到的错误本质是Angular的表单指令所在的模块没有被正确导入——formGroup和formControl这些指令属于ReactiveFormsModule，Angular不会默认全局启用它们，必须在组件所属的功能模块中显式导入。

结合你的项目结构（person模块下的person-info组件），按以下步骤解决：

1. 编辑person.module.ts，导入表单模块 #

打开person/person.module.ts，先导入ReactiveFormsModule（如果用到模板驱动表单，也可以加上FormsModule）：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// 导入表单相关模块
import { ReactiveFormsModule, FormsModule } from '@angular/forms';

import { PersonInfoComponent } from './person-info/person-info.component';
import { PersonService } from './person.service';

@NgModule({
  declarations: [
    PersonInfoComponent
    // 模块内其他组件...
  ],
  imports: [
    CommonModule,
    // 添加这两个模块到imports数组
    ReactiveFormsModule,
    FormsModule // 可选：如果使用模板驱动表单（比如ngModel）则添加
  ],
  providers: [PersonService]
})
export class PersonModule { }

2. 为什么这能解决问题？ #

Angular的所有指令（包括表单绑定指令）都需要通过模块的imports数组注册后，才能在该模块下的组件中使用。你的person-info.component.ts属于PersonModule，所以必须在这个功能模块中导入ReactiveFormsModule，而不是只在根模块AppModule中导入（虽然根模块导入也能生效，但按Angular最佳实践，应该在功能模块中按需导入）。

额外注意：动态加载HTML的特殊情况 #

如果你的后端HTML是通过[innerHTML]动态插入到组件中的，那即使导入了模块，Angular也不会编译这段动态HTML里的Angular指令（因为Angular的编译是静态的）。这种情况下你需要：

• 将后端返回的模板编译成动态组件，再通过ComponentFactoryResolver渲染
• 或者改用Angular的NgTemplateOutlet等方式处理动态模板逻辑

不过先优先解决模块导入的问题，因为当前的错误提示完全是指令未被识别的典型表现。

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