Question

我在使用Angular中的primeng库中的multiselect组件时遇到了问题。一切似乎都正常，直到我注意到事件顺序有些奇怪的问题（我想）。这是工作示例：https://stackblitz.com/edit/angular-w7dfgq

“有趣”的事情发生在这里：

<p-multiSelect #select="ngModel" required [options]="options"  [(ngModel)]="selected"  [showHeader]=false></p-multiSelect>

<div *ngIf="select.invalid && select.touched"> Validation error </div>

因此，您可能会假设没有选择任何值（控件处于无效和触摸状态）时，我试图显示一些消息。现在，当您第一次访问该页面时，该控件的状态为untouched和invalid，因此未显示消息（到目前为止很好）。但是，当您现在单击某些选项时，消息“闪烁”不是您想要的行为（在该状态下根本不会弹出）。据我了解（基于github上的primeng代码-https://github.com/primefaces/primeng/blob/master/src/app/components/multiselect/multiselect.ts）onInputBlur在onOptionClick之前被调用，它导致控件在更改选择值之前将其状态更改为touched （并使它有效）。

那么现在的问题是，有什么想法可以解决这个“闪烁”问题吗？我想扩展组件将是唯一的选择，但是即使那样...我如何更改事件的顺序？（这样onOptionClick会比onInputBlur更快地被触发）。

Answer 1

onPanelHide事件表明multiselect元素已被“触摸”，而NgModel.dirty标志表明用户进行了选择更改。您可以在验证条件中将两者结合起来：

<p-multiSelect #select="ngModel" required [options]="options" 
  [(ngModel)]="selected" [showHeader]=false 
  (onPanelHide)="panelClosed = true"></p-multiSelect>

<div *ngIf="select.invalid && (select.dirty || panelClosed)"> Validation error </div>

有关演示，请参见this stackblitz。

Answer 2

我正在使用primeNg p-dropdown过滤器为true并添加反应形式验证。当我单击下拉列表时，将显示该时间验证错误。预期：-当下拉面板隐藏时，取决于条件，验证错误应会出现。

关于如何获得预期行为的任何想法。因为我需要p下拉列表中的过滤器。

<p-dropdown [options]="platformData" formControlName="platform" placeholder="select" class="form-control" [class.is-invalid]="platform.invalid && platform.touched" defaultLabel="Select" [filter]="true" [showClear]="false" (onPanelHide)="panelClosed = true" ></p-dropdown>
                                                            <div *ngIf="platform.invalid && platform.touched">
                                                                    <small *ngIf="platform.errors?.required" class="text-danger">Platform are required</small>
                                                            </div>

primeng的multiselect组件中的事件顺序

2 个答案: