Angular

Question

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

Stackblitz link：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 class invalid-feedback。一旦您想单击下拉选项，它就会变得可见，因为输入控件变脏并且应用了 class is-invalid。

而且据我所知，你不需要自己给控件设置class ng-invalid因为它会被Angular.[=17设置=]

解决方案

目前我发现的唯一方法如下：

<p-dropdown
  ...
  (onHide)="equipmentForm.get('selectedStock').markAsDirty()"
  [ngClass]="{
    'is-invalid': equipmentForm.get('selectedStock').dirty && !equipmentForm.get('selectedStock').valid
  }">
</p-dropdown>

在这种方法中，您可以在下拉覆盖层关闭后立即将控件标记为脏。所以，你的错误会在后面显示。

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

Angular - Dropdown validation - Validation is shown before the mouseup event

validation

typescript

angular-reactive-forms

primeng-dropdowns