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>