Angular2 select 表单未捕获值

Question

我正在使用 Angular 14 尝试创建一个 select 表单，从我的组件中的数组中读取选项。 select 选项已正确填充，但当我发送表单时，未发送选定的选项值。 它只是让它空着。 关于可能导致此问题的任何建议？

<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); // this is where I see the field is always empty
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]="..." 仅支持字符串值，而 [ngValue]="..." 支持任何类型因此需要在 [ngValue]="perfil.value" HTML，但如果我 [ngValue] 而不是 [value]，它会给我错误。 错误信息是：

无法绑定到“ngValue”，因为它不是“mat-option”的已知属性。

1. 如果“mat-option”是一个 Angular 组件并且它有“ngValue”输入，则验证它是该模块的一部分。
2. 如果“mat-option”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以抑制此消息。
3. 要允许任何属性，请将“NO_ERRORS_SCHEMA”添加到此组件的“@NgModule.schemas”中。ngtsc(-998002)

Answer 1

似乎 select 与FormGroup中的控件无关。 因此，Angular 不知道 select 应该更改窗体中的perfil控件。 假设您在模板的前面设置了FormGroup ，您可以使用formControlName指令将 select 绑定到该控件，如下所示：

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