Angular - 下拉验证 - 在 mouseup 事件之前显示验证

Question

我正在使用响应式表单来实现验证行为。 我在验证下拉组件时遇到问题。验证显示在 mouseup 事件之前（问题（yt 链接）：Dropdown Validation）

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>

我的问题是，这是预期的行为还是？

Answer 1

所以，据我从调试中了解到，这是奇怪的预期行为。

您的输入控件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>

在这种方法中，一旦下拉覆盖关闭，您就将控件标记为脏。所以，你的错误会在之后显示出来。