Angular中Mat Autocomplete组件表单提交返回空字符串该如何解决？

问题根因 #

你遇到的空值问题由以下几个常见错误导致：

1. 响应式表单控件与原生value属性冲突：你在input上同时绑定了[formControl]和原生value属性，Angular响应式表单由FormControl全权管控值状态，手动绑定的value="{{locvaluse}}"会干扰控件的赋值逻辑
2. FormControl引用路径不一致：如果你的locationFormControl是单独声明的独立FormControl实例，没有被纳入adverForm的FormGroup管理，从adverForm.controls下取值自然返回空
3. displayFn冗余操作：你在displayFn中修改外部变量locvaluse，这个函数本身只负责返回Autocomplete的显示文本，不应该做额外的变量赋值操作，也会间接干扰值同步

解决步骤 #

1. 移除模板中的冗余value绑定 #

修改input节点代码，删除手动绑定的value属性：

<mat-form-field class="" appearance="outline">
  <mat-label>Available City</mat-label>
  <input matInput class="input-text" placeholder="start typing" [matAutocomplete]="location" [formControl]="locationFormControl">
  <mat-autocomplete #location="matAutocomplete" [displayWith]="displayFn" >
    <mat-option *ngFor="let location of filteredOptions | async" [value]="location">
      {{ location.name}}
    </mat-option>
   </mat-autocomplete>
</mat-form-field>

2. 统一FormControl的取值路径 #

两种方案二选一即可：

• 方案一：直接取独立FormControl的值（不需要纳入adverForm管理的场景）
  修改onSubmit的取值逻辑：

  onSubmit(){
    // 直接取单独声明的FormControl实例，返回完整的location对象
    console.log(this.locationFormControl.value);
    // 如果只需要城市名字段，取 this.locationFormControl.value?.name
  }
  

• 方案二：将控件纳入adverForm统一管理（需要和其他表单字段一起提交的场景）
  首先在表单初始化时把控件加入FormGroup：

  // 表单初始化阶段（以FormBuilder为例）
  this.adverForm = this.fb.group({
    // 其他表单控件声明...
    locationFormControl: [null]
  })
  

  然后修改模板中input的绑定方式，把[formControl]改为formControlName：

  <input matInput ... formControlName="locationFormControl">
  

  此时你原来的adverForm.controls.locationFormControl.value就能正常取值。

3. 优化displayFn逻辑 #

删除displayFn中对外部变量的赋值操作，只保留返回显示文本的逻辑：

displayFn(location: LocationTypes): string {
  return location?.name ?? '';
}

可选调整 #

如果你不需要拿到完整的location对象，只需要城市名字符串，可直接把mat-option的[value]绑定改为location.name，后续提交直接拿到的就是字符串值，不需要再取对象的name属性。

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