'onClose' 的 PrimeNG 日历事件在跳出字段时未触发？

Question

我目前正在使用 PrimeNG 的日历组件，并且我依赖于日历的 onClose 在用户输入日期时更新我的基础数据。但是，我注意到当焦点通过按选项卡按钮离开日历时，onClose 事件不会触发。

模板比较简单，例如：

<p-calendar
  ...
  (onClose)="closeEvent($event)">
</p-calendar>

和功能，出于测试目的，只需记录一条消息：

closeEvent(ev) {
  console.log('close event fired');
}

当用户通过单击离开日历退出日历时，该消息会正确记录到屏幕，但不会在 Tab 键离开时触发。

但是，在跳出时似乎确实会触发验证；如果我在退出前输入了无效日期，它会返回到默认日期。

这是一个错误吗？我在 issues list in PrimeNG's repository.

中找不到任何类似的内容

我尝试使用 onBlur 事件，但这导致了一个问题，即当第一次选择一个值时，日历弹出窗口不会关闭，并且会使用之前的日历值触发该事件。需要再次选择日历中的日期，模型才能实际更新，并使用正确的值调用 onBlur 事件。

以上代码已在 Chrome 和 Firefox 中测试。

我们正在使用 PrimeNG 版本 6.1.5

Answer 1

所以这是工作代码

app.component.html

<div> 
  <p-calendar [(ngModel)]="date1" (onClose)="hello()" [showIcon]="true" [showOnFocus]="true"></p-calendar>
</div>

app.component.ts

import { Component } from '@angular/core';
import {CalendarModule} from 'primeng/calendar';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'prime-ex';
  date1 = new Date();;

  hello(){
    console.log("Hello");
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import {CalendarModule} from 'primeng/calendar';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CalendarModule,
    FormsModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

并且在浏览器中的输出如下图所示。是的，它正在触发事件。请 post 完整代码或调试它。没有错误。我没有安装 font-awesome，所以图标显示不正确。此代码也可与制表符完美配合。

'onClose' 的 PrimeNG 日历事件在跳出字段时未触发？

PrimeNG's calendar event for 'onClose' not firing when tabbing out of a field?

javascript

primeng

angular