Angular 14中mat-select表单无法捕获选中值问题求助

问题场景 #

使用Angular 14开发时，通过组件数组渲染mat-select的选项，选项能正常显示，但提交表单时perfil字段始终为空，无法获取选中值。

相关代码 #

HTML模板

<mat-label>Perfil</mat-label>
<mat-select name="perfil">
   <mat-option *ngFor="let perfil of perfis" 
   [value]="perfil.value">{{ perfil.title }}
   </mat-option>
</mat-select>

组件中的选项数组

perfis: {title: string, value: number }[] = [
    { "title": "Admin", "value": 1 },
    { "title": "Coordenador", "value": 2 },
    { "title": "Colaborador", "value": 3 },
];

表单构建代码

this.form = this.formBuilder.group({
    id: [''],
    login: [''],
    password: [''],
    nome: [''],
    rg: [''],
    cpf: [''],
    telefone: [''],
    email: [''],
    ativo: [''],
    perfil: ['']
});

提交方法

onSubmit() {
console.log(this.form.value); // 此处可见perfil字段始终为空
this.usersService.save(this.form.value)
.subscribe(
  data => this.onSuccessInsertion('Informação inserida do banco de dados.'),
  error => this.onError('Não foi possível salvar esta informação no banco de dados.')
  );
}

尝试过的方法及问题 #

• 尝试用[selected]绑定选中状态，Angular不识别该属性
• 考虑到[value]仅支持字符串类型，而perfil.value是数字，改用[ngValue]="perfil.value"时出现错误：

Can't bind to 'ngValue' since it isn't a known property of 'mat-option'.

错误提示给出的建议：

1. 若'mat-option'是Angular组件且有'ngValue'输入，请确认其已加入模块。
2. 若'mat-option'是Web组件，请在组件的@NgModule.schemas中添加'CUSTOM_ELEMENTS_SCHEMA'以抑制该提示。
3. 若允许任意属性，请在组件的@NgModule.schemas中添加'NO_ERRORS_SCHEMA'。

解决方案 #

问题核心是mat-select未与表单控件双向绑定，且Angular Material的mat-option不支持[ngValue]，只能用[value]。具体修复步骤：

1. 为mat-select绑定表单控件
   在mat-select上添加formControlName="perfil"，实现选中值与表单字段的同步：

   <mat-label>Perfil</mat-label>
   <mat-select name="perfil" formControlName="perfil">
      <mat-option *ngFor="let perfil of perfis" [value]="perfil.value">
          {{ perfil.title }}
      </mat-option>
   </mat-select>
   

2. 处理数字类型值（可选）
   Angular的[value]会自动将数字转为字符串，若后端需要数字类型，可在提交前转换，或初始化表单时指定控件类型：

   // 表单构建时指定初始值为数字类型，可选添加必填校验
   this.form = this.formBuilder.group({
       // ...其他字段
       perfil: [0, Validators.required]
   });
   

3. 确认模块导入正确
   确保模块中已导入ReactiveFormsModule和Angular Material相关模块：

   import { ReactiveFormsModule } from '@angular/forms';
   import { MatSelectModule } from '@angular/material/select';
   import { MatOptionModule } from '@angular/material/core';
   
   @NgModule({
     imports: [
       // ...其他模块
       ReactiveFormsModule,
       MatSelectModule,
       MatOptionModule
     ]
   })
   export class YourModule { }
   

验证修复 #

修改后重新提交表单，查看console.log(this.form.value)，perfil字段将正确获取选中的数字值（如1、2、3）。

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