Angular 5中使用select组件报错：无法绑定到'ngValue'

这个问题的核心原因很明确：你的组件所在的子模块没有正确导入表单相关模块，Angular的模块系统是模块化隔离的，主模块中导入的模块不会自动传递给子模块，哪怕子模块被主模块导入了也不行。

下面是具体的解决步骤：

1. 找到你的子模块文件（比如命名为child.module.ts这类文件）
2. 在子模块中导入表单模块，根据你使用的表单类型，导入FormsModule（模板驱动表单）或ReactiveFormsModule（响应式表单），两个都导入也没问题
3. 将导入的模块添加到子模块的imports数组中

这里是子模块的代码示例：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// 导入表单模块
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
// 导入你的select组件
import { YourCTNSelectComponent } from './your-ctn-select.component';

@NgModule({
  declarations: [
    YourCTNSelectComponent // 确保你的组件在这里声明
  ],
  imports: [
    CommonModule,
    FormsModule, // 必须添加这里，ngValue依赖这个模块
    ReactiveFormsModule // 如果你的组件用了响应式表单（比如formControlName），也需要添加
  ],
  // 如果这个组件要被主模块或其他模块使用，记得添加exports
  exports: [YourCTNSelectComponent]
})
export class YourChildModule { }

另外，还要检查你的组件代码和模板的几个细节：

• 如果你用了formControlName="state"，确保组件类中已经正确创建了对应的FormGroup：

  import { Component, OnInit } from '@angular/core';
  import { FormBuilder, FormGroup } from '@angular/forms';
  
  @Component({
    selector: 'app-ctn-select',
    templateUrl: './ctn-select.component.html'
  })
  export class YourCTNSelectComponent implements OnInit {
    myForm: FormGroup;
    availableCTN = [/* 你的数据集合 */];
  
    constructor(private fb: FormBuilder) { }
  
    ngOnInit(): void {
      // 初始化表单
      this.myForm = this.fb.group({
        state: [''] // 对应模板里的formControlName="state"
      });
    }
  
    onCTNChange(value: any) {
      // 你的业务逻辑
    }
  }
  

• 模板中的select必须包裹在绑定了[formGroup]="myForm"的form标签内，或者使用[formControl]="control"直接绑定：

  <form [formGroup]="myForm">
    <label for="ctn" class="d-inline-block pl-1 semi-bold">Current active number</label>
    <select #selectElem class="custom-select" id="ctn" (change)="onCTNChange(selectElem.value)" formControlName="state" >
      <option value="" disabled>Choose a state</option>
      <option *ngFor="let ctn of availableCTN" [ngValue]="ctn.value">{{ctn.text}}</option>
    </select>
  </form>
  

为什么主模块导入FormsModule没用？因为Angular的模块是封装的，每个模块的imports只对当前模块及其声明的组件生效，子模块作为独立的模块单元，必须自己导入所需的依赖模块，不能依赖主模块的导入。

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