Model Driven Form下拉框失效：无法获取选中值

这种下拉框和FormControl不同步、不触发valueChanges的问题我之前踩过好几次坑，咱们来一步步排查解决：

• 检查模板绑定是否正确
  首先要确保你的模板里，<form>标签正确绑定了[formGroup]="form"，下拉框<select>的formControlName属性和FormBuilder中定义的'type'完全一致。比如正确的模板结构应该是这样：

  <form [formGroup]="form">
    <!-- 建议加一个禁用的默认空选项，避免初始值null和选项不匹配 -->
    <select formControlName="type">
      <option value="" disabled>请选择类型</option>
      <option value="1">类型1</option>
      <option value="2">类型2</option>
    </select>
  </form>
  

  如果这里的绑定写错了（比如formControlName拼错、formGroup没绑定），下拉框的选中值根本不会同步到FormControl里，自然也触发不了valueChanges。

• 检查选项值的类型匹配
  你的FormControl初始值设为null，要注意下拉框选项的value类型和初始值是否兼容。比如如果选项的value是数字类型（要写成[value]="1"才是数字，直接写value="1"是字符串），而你的业务逻辑里期望的是数字，那初始值保持null或undefined即可，不要用字符串类型的初始值，否则可能因为类型不匹配导致同步失败。

• 如果绑定的是对象选项，必须添加compareWith函数
  要是你的下拉框选项是对象数组（比如每个选项是{id: 1, name: '类型1'}这种），那默认的表单控件比较逻辑是引用比较，而不是值比较，这时候就会出现选中对象后，FormControl认为值没变化的情况。解决方法是给<select>添加[compareWith]函数：
  模板：

  <select formControlName="type" [compareWith]="compareType">
    <option [ngValue]="item" *ngFor="let item of typeList">{{item.name}}</option>
  </select>
  

  组件类里添加比较函数：

  compareType(a: any, b: any): boolean {
    // 按对象的唯一标识（比如id）来比较
    return a && b ? a.id === b.id : a === b;
  }
  

• 确认valueChanges的订阅时机
  要确保你是在FormBuilder创建完表单之后，再订阅valueChanges事件。比如在ngOnInit里先创建表单，再订阅：

  ngOnInit(): void {
    this.form = this.formBuilder.group({
      'type': [null, Validators.required]
    });
  
    // 表单初始化完成后再订阅
    this.form.valueChanges.subscribe(formValue => {
      console.log('表单值更新:', formValue);
    });
  }
  

  如果订阅时机在表单创建之前，那肯定监听不到后续的变化。

按照上面的步骤排查，基本就能解决下拉框值不同步、不触发valueChanges的问题了。

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