Angular响应式表单中无法将ngFor循环的select默认选中首个选项

问题出在你用DOM层面的[value]设置默认选中项，但Angular响应式表单的控件值由FormControl管理，DOM的选中状态不会自动同步到表单控件内部，导致form.get('color')?.value返回空字符串。

解决步骤 #

1. 移除模板中select的[value]属性，响应式表单的值完全由FormControl控制，无需手动操作DOM属性
2. 在colors数组更新后，通过setValue方法手动将第一个颜色的code赋值给color控件
3. 优化监听逻辑，只监听model控件的变化，减少不必要的触发

修改后的代码 #

模板部分

<form [formGroup]="stepOneForm">
  <label for="modelSelect">Model:</label>
  <select id="modelSelect" formControlName="model">
    <option value="" selected>Choose...</option>
    <option *ngFor="let model of models" [value]="model.code">
      {{ model.description }}
    </option>
  </select>

  <!-- 目标输入框 -->
  <ng-container *ngIf="stepOneForm.get('model')?.value as code">
    <label for="colorSelect">Color:</label>
    <select id="colorSelect" formControlName="color" (change)="onColorSelected()" [disabled]="colors.length === 0">
      <option *ngFor="let color of colors" [value]="color.code">
        {{ color.description }}
      </option>
    </select>
    <img [src]="imagePath" alt="car">
  </ng-container>
</form>

TS部分

ngOnInit() {
  this.carService.getModels().subscribe(models => {
    this.models = models;
  });

  // 仅监听model控件的变化，更精准
  this.stepOneForm.get('model')?.valueChanges.subscribe(modelCode => {
    this.carService.updateStepOneValidity(this.stepOneForm.valid);
    this.colors = this.models.find(modelObj => modelObj.code === modelCode)?.colors ?? [];
    
    // 当有颜色选项时，设置默认选中第一个
    if (this.colors.length > 0) {
      this.stepOneForm.get('color')?.setValue(this.colors[0].code);
    } else {
      this.stepOneForm.get('color')?.setValue('');
    }
    
    // 此时能正确获取color控件的值
    console.log(this.stepOneForm.get('color')?.value);
    
    if (modelCode) {
      this.carService.updateShoppingCart(this.stepOneForm.value);
    }
  });
}

核心原因说明 #

响应式表单的控件状态完全由FormControl实例维护，直接修改DOM的value属性只会改变页面显示，不会同步到表单内部状态。必须通过setValue/patchValue这类API来更新控件值，才能保证表单数据的一致性。

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