时间戳

首页 > 解决方案 > primeng 的多选组件中的事件顺序

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

问题描述

我在 Angular 中使用 primeng 库中的多选组件时遇到了问题。一切似乎都运行良好，直到我注意到事件顺序存在一些奇怪的问题（我猜）。这是工作示例：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）。

标签： angularprimeng

解决方案

该onPanelHide事件指示多选元素已被“触摸”，并且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>

请参阅此 stackblitz以获取演示。

推荐阅读