Angular响应式表单中MatSelect提交时无法保留选中值问题

你遇到的核心问题是<mat-select>绑定的表单控件值在提交时丢失，但valueChanges能正常响应，最可能的原因是**mat-select上错误添加了matInput属性**，导致Angular表单控件绑定逻辑异常。

1. 修复核心错误：移除mat-select的matInput属性 #

matInput是专门为<input>元素设计的属性，用于在mat-form-field中增强原生输入框的Material样式，<mat-select>作为独立的下拉控件不需要这个属性。保留它会干扰表单控件的值绑定流程。

修正后的HTML代码：

<div class="form-group has-default">
  <mat-form-field class="input-group full-width">
    <mat-icon matPrefix>location_city</mat-icon> 
    <mat-select placeholder="Ciudad" formControlName="ciudad_id">
      <mat-option *ngFor="let ciudad of ciudades" [value]="ciudad.id">{{ciudad.nombre}}</mat-option>
    </mat-select>
    <mat-error *ngIf="ciudad_id?.invalid && ciudad_id?.dirty">
      The city is required.
    </mat-error>
  </mat-form-field>
</div>

2. 其他排查与优化点 #

如果移除matInput后问题仍存在，可以检查以下几点：

• 表单提交绑定是否正确：确保外层<form>标签正确绑定了表单组和提交事件，比如：

  <form [formGroup]="form" (ngSubmit)="onSubmit()">
    <!-- 你的表单控件 -->
    <button type="submit">提交</button>
  </form>
  

  注意按钮必须是type="submit"，否则不会触发表单的ngSubmit事件。

• 值类型匹配：如果ciudad.id是数字类型，建议将表单控件的初始值设为null而非空字符串，避免类型不匹配导致的隐性问题：

  private initializeForm() {
    this.form = this._form_builder.group({
      ciudad_id: [null, Validators.required],
      // 其他控件...
    });
  }
  

• 排除外部干扰：检查是否有自定义指令、表单拦截器或其他代码在提交前修改了form.value，比如是否有reset()或patchValue()的误调用。

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