Angular响应式表单select下拉框报错无法正常使用如何修复

问题根因 #

1. 响应式表单和模板驱动表单混用：你同时使用了formControlName（响应式表单API）和[(ngModel)]（模板驱动表单API），Angular默认禁止两种表单方案混合使用
2. 未给表单控件绑定父级FormGroup：使用formControlName的元素必须被添加了[formGroup]绑定的父元素包裹，且绑定的是你TS中声明的FormGroup实例
3. formControlName绑定值错误：formControlName接收的是你在FormGroup中定义的控件名的字符串，而非绑定选中值对象

修复步骤 #

步骤1：导入响应式表单依赖

先确认组件所在的模块已经导入ReactiveFormsModule：

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他现有导入项
    ReactiveFormsModule
  ]
})
export class YourComponentModule { }

步骤2：修改组件TS代码，完善FormGroup定义

import { FormGroup, FormControl } from '@angular/forms';

form: FormGroup = new FormGroup({
  // 新增gender控件，设置默认选中值为列表第一个项
  gender: new FormControl(this.genderList[0])
});
genderList = [{ type: 'Female' }, { type: 'Male' }];

consoleLog() {
  // 直接从表单控件获取当前选中值
  console.log(this.form.get('gender')?.value);
}

步骤3：修改HTML模板代码

<!-- 父元素绑定FormGroup实例 -->
<div [formGroup]="form">
  <select
    formControlName="gender"
    class="form-control"
    (change)="consoleLog()"
  >
    <option *ngFor="let g of genderList" [ngValue]="g">
      {{ g.type }}
    </option>
  </select>
</div>

补充说明 #

如果不需要使用响应式表单，也可以完全用模板驱动方案：删掉formControlName属性，保留[(ngModel)]即可，同时在模块中导入FormsModule即可正常运行。后续要获取表单全量值可直接调用this.form.value，也可通过this.form.get('gender').valueChanges订阅性别选择的实时变化。

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