Question

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

模板很简单，例如：

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

为了测试目的，该函数只记录一条消息：

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

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

但是，跳出验证似乎会触发验证；如果我在跳出之前输入了无效的日期，它将恢复为默认日期。

这是一个错误吗？我在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 { }

浏览器中的输出如下所示。是的，它正在触发事件。请发布完整代码或对其进行调试。没有错误。我没有安装超棒的字体，因此图标无法正确显示。此代码也可以与Tab-out完美配合。

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

1 个答案: