代码之家 › 专栏 › 技术社区 › peter Schiza

primeng的multiselect组件中的事件顺序

primeng angular

1

peter Schiza · 技术社区 · 6 年前

在Angular中使用Priming库中的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上的启动代码)- https://github.com/primefaces/primeng/blob/master/src/app/components/multiselect/multiselect.ts onInputBlur 方法之前已调用 onOptionClick touched 更改之前,请选择值(并使其有效)。

那么现在的问题是,有没有办法解决这个“眨眼”问题?我想扩展组件将是唯一的选择,但即使如此。。。如何更改事件的顺序?(以便 onOptionClick 触发的时间比 onInputBlur ).

1 回复 | 直到 6 年前

1

ConnorsFan 6 年前

这个 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 为了演示。