我有一個使用 Angular 材料 mat-select 的表單,我從選項中獲取和觀察資料,并通過代碼設定所選專案的值。一切正常,但我遇到的問題是我的代碼僅在表單不是原始且有效的情況下才允許更新。所以我假設改變墊選擇框的值會使原始錯誤,但事實并非如此。
下面是我在模板中使用的代碼,是否有任何遺漏或者我必須使用 onChange 事件手動將表單設定為 pristine = false
<mat-form-field ngDefaultControl label=" " formControlName="parent">
<mat-label>Parent</mat-label>
<mat-select [(value)]="menuData.parent">
<mat-option value="" aria-selected="true" selected> --Select Parent -- </mat-option>
<mat-option *ngFor="let parent of menuParents$ | async" [value]="parent._id">
{{ parent.name}}
</mat-option>
</mat-select>
</mat-form-field>
我現在通過使用 selectionChange 事件解決了這個問題
<mat-select [(value)]="menuData.parent" (selectionChange)="selectionChange($event)">
selectionChange(e) {
console.log(e)
this.form.markAsDirty()
}
即使這樣,我也不確定并且確定這是正確的方法。我查看了 mat-select 的檔案,但找不到有關如何執行此操作的任何內容。
uj5u.com熱心網友回復:
您不應該手動執行此操作。
看起來問題在于您設定formControlName了 on<mat-form-field>而不是<mat-select>.
formControlName將模板中的控制元件系結到表單模型,在這種情況下,您已將其系結到錯誤的控制元件,因此表單系統將無法識別對 select 的更改,這意味著表單有效性沒有更改。
轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/427229.html
