primeng 的多选组件中的事件顺序

Question

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

"interesting" 事情发生在这里：

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

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

所以你可能会认为我试图在没有值 selected 时显示一些消息（控件处于无效和触摸状态）。现在，当您第一次点击该页面时，该控件具有 untouched 和 invalid 状态，因此不会显示消息（到目前为止一切正常）。但是，当您现在单击某些选项时，消息 'blinks' 这不是所需的行为（在该状态下根本不应该弹出）。据我了解（基于 github - https://github.com/primefaces/primeng/blob/master/src/app/components/multiselect/multiselect.ts 上的 primeng 代码）onInputBlur 方法在 onOptionClick 之前被调用，它导致控件将其状态更改为 touched在更改 select 值（并使其有效）之前。

所以现在的问题是，我该如何解决这个问题 'blinking'？我想扩展组件将是唯一的选择，但即便如此......我怎样才能改变事件的顺序？（因此 onOptionClick 比 onInputBlur 更早触发）。

Answer 1

onPanelHide事件表示multiselect element has been "touched" and the 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。

primeng 的多选组件中的事件顺序

Order of events in primeng's multiselect component

primeng

angular