Angular 12获取选中产品ID NgModule绑定功能失效问题咨询

问题根因 #

• 同一<select>控件同时使用了[(ngModel)]和formControlName两个绑定指令，二者分别属于Angular模板驱动表单、响应式表单的API，不支持同时绑定到同一个表单控件，会直接导致值绑定逻辑冲突失效
• 绑定的触发事件错误：当前用的(click)事件会在点击下拉框时立即触发，此时还未完成新选项的选择操作，拿到的brandId永远是上一次选中的旧值

修复方案 #

方案1：保留模板驱动表单逻辑（使用ngModel） #

移除formControlName属性，同时将(click)事件替换为(ngModelChange)监听选中值变更：

<div class="form-group col-md-6">
  <label>Aracın Markası</label>
  <select
    [(ngModel)]="brandId"
    (ngModelChange)="getModels($event)"
    class="form-select"
    aria-label="Model"
  >
    <option  *ngFor="let brand of brandList"
     [ngValue]="brand.id">
     {{ brand.name }}
    </option>
  </select>
</div>

注：如果当前组件所在的模块没有导入FormsModule需要补充导入，你提到其他组件逻辑正常，可忽略该配置检查。

方案2：保留响应式表单逻辑（使用formControlName） #

移除[(ngModel)]绑定，直接通过FormControl的值变更事件触发逻辑：

1. 组件TS代码：

// 表单初始化后订阅值变化
ngOnInit() {
  // 替换yourForm为你实际定义的FormGroup实例名
  this.yourForm.get('brandId').valueChanges.subscribe(newBrandId => {
    this.getModels(newBrandId);
  })
}

2. 模板代码：

<div class="form-group col-md-6">
  <label>Aracın Markası</label>
  <select
    class="form-select"
    aria-label="Model"
    formControlName="brandId"
  >
    <option  *ngFor="let brand of brandList"
     [ngValue]="brand.id">
     {{ brand.name }}
    </option>
  </select>
</div>

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