我正在使用反應式表單來實作驗證行為。我在驗證下拉組件時遇到問題。驗證顯示在 mouseup 事件之前（問題（yt 鏈接）：下拉驗證）
Stackblitz 鏈接：https ://angular-um4dtz.stackblitz.io/
.html
<div class="col-md-8">
<p-dropdown id="regionId" [required]="true" formControlName="selectedRegion"
placeholder="Select region (required)" [options]="regions" optionLabel="name"
[ngClass]="{'ng-invalid ng-dirty is-invalid' : (equipmentForm.get('selectedRegion').touched || equipmentForm.get('selectedRegion').dirty) && !equipmentForm.get('selectedRegion').valid }">
</p-dropdown>
<span class="invalid-feedback">
<span *ngIf="equipmentForm.get('selectedRegion').errors?.required">
Please select a region.
</span>
</span>
</div>
我的問題是，這是預期的行為還是？
uj5u.com熱心網友回復：
因此，據我從除錯中了解到，這是奇怪的預期行為。
您的輸入控制元件selectedStock具有直接以下錯誤狀態：{ "required": true }。因此，您的錯誤訊息
<span class="invalid-feedback">
<span *ngIf="equipmentForm.get('selectedStock').errors?.required">
Please select a stock.
</span>
</span>
已經存在于 HTML 中。但由于 CSS 類，它沒有顯示invalid-feedback。只要您想單擊下拉選項，它就會變得可見，因為輸入控制元件變臟并應用了類is-invalid。
而且據我所知，您不需要ng-invalid自己將類設定為控制元件，因為它將由 Angular 設定。
解決方案
目前，我發現的唯一方法是：
<p-dropdown
...
(onHide)="equipmentForm.get('selectedStock').markAsDirty()"
[ngClass]="{
'is-invalid': equipmentForm.get('selectedStock').dirty && !equipmentForm.get('selectedStock').valid
}">
</p-dropdown>
在這種方法中，一旦下拉覆寫層關閉，您就將控制元件標記為臟。因此，您的錯誤會在之后顯示。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/322444.html
上一篇：GoogleRecaptcha<re-captcha>si不是已知元素
下一篇：如何選擇表格？