Angular TestBed报错：无法绑定‘ngModel’至‘ng-select’

开发者阿泽

2026-5-20

解决Angular测试ng-select时ngModel绑定错误的方案

这问题我太熟了！你遇到的无法绑定‘ngModel’至‘ng-select’错误，本质是**ngModel指令并不属于NgSelectModule**，它是Angular官方表单模块提供的功能——你得在TestBed配置里额外导入对应的表单模块才行。

错误原因拆解

Angular的ngModel是模板驱动表单的核心指令，由FormsModule提供；如果是响应式表单场景，ReactiveFormsModule也包含了它的支持。你之前只导入了NgSelectModule解决了items绑定的问题，但测试环境依然识别不了ngModel这个指令，所以才会报错。

具体解决方案

在TestBed的imports数组里，同时加入NgSelectModule和FormsModule（如果是模板驱动表单），或者ReactiveFormsModule（如果组件用了响应式表单）。下面是完整的测试配置示例：

import { getTestBed, TestBed } from '@angular/core/testing';
import { ProductGenericGridComponent } from './product-generic-grid.component';
// 导入所需模块
import { NgSelectModule } from '@ng-select/ng-select';
import { FormsModule } from '@angular/forms';

describe('ProductGenericGridComponent', () => {
  let component: ProductGenericGridComponent;
  let fixture: ComponentFixture<ProductGenericGridComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ ProductGenericGridComponent ],
      // 同时导入NgSelectModule和表单模块
      imports: [ NgSelectModule, FormsModule ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(ProductGenericGridComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});