使用其他模块组件时出现Can't bind to ngModel错误如何解决？

问题原因 #

你遇到的报错是因为在使用[(ngModel)]双向绑定的组件所属模块中，没有导入Angular内置的FormsModule：

• [(ngModel)]是模板驱动表单的核心指令，由@angular/forms包下的FormsModule提供，不属于PrimeNG的MultiSelectModule，所以单独导入PrimeNG的多选模块不会自动生效。
• 之前同一模块下使用正常，是因为当时所属模块已经导入了FormsModule，拆分到共享模块后没有同步导入该依赖就触发了报错。

修复步骤 #

1. 首先修改shared-components.module.ts文件，导入FormsModule：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms'; // 新增这行
import { MultiSelectModule } from 'primeng/multiselect';
import { RawMaterialMultiSelectComponent } from './raw-material-multi-select/raw-material-multi-select.component';

@NgModule({
  declarations: [
    RawMaterialMultiSelectComponent
  ],
  imports: [
    CommonModule,
    FormsModule, // 新增这行到imports数组
    MultiSelectModule
  ],
  exports: [
    RawMaterialMultiSelectComponent
  ]
})
export class SharedComponentsModule { }

2. 额外确认你的recipe.module.ts中已经显式导入了SharedComponentsModule：Angular的模块依赖是隔离的，仅在根模块app.module.ts中导入共享模块不会自动对子功能模块生效，必须在使用共享组件的功能模块中单独导入。

可选验证 #

如果修复后仍有问题，可检查PrimeNG版本和Angular版本的兼容性，以及raw-material-multi-select.component.ts中selectedRawMaterials的类型是否符合PrimeNG多选组件的绑定要求（多选组件默认绑定数组类型，你当前定义为string类型如果是单选可以正常使用，多选的话需要改为数组类型string[] = []）。

内容的提问来源于stack exchange，提问作者Anne-Katrine