Календарное событие PrimeNG для 'onClose' не срабатывает при закрытии поля? - PullRequest
Новая
       7

Календарное событие PrimeNG для 'onClose' не срабатывает при закрытии поля?

0 голосов
/ 18 января 2019

В настоящее время я использую календарный компонент PrimeNG, и я полагаюсь на onClose календаря для обновления моих базовых данных, когда пользователь вводит дату. Тем не менее, я заметил, что когда фокус покидает календарь с помощью нажатия кнопки вкладки, событие onClose не срабатывает.

Шаблон представляет собой нечто простое, например: 

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

И функция, для целей тестирования, просто войдите в сообщение: 

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

Сообщение правильно регистрируется на экране, когда пользователь выходит из календаря, щелкая по нему мышью, но не запускается при нажатии на вкладки.

Тем не менее, проверка действительно срабатывает при выводе табуляции; Если я введу недопустимую дату перед выводом, она вернется к дате по умолчанию.

Это ошибка? Я не смог найти ничего подобного в списке проблем в репозитории PrimeNG .

Я попытался использовать событие onBlur, но это вызывает проблему, при которой всплывающее окно календаря не закрывается, когда значение выбирается в первый раз, а событие запускается с предыдущим значением календаря. Дата в календаре должна быть выбрана во второй раз для фактического обновления модели, а событие onBlur должно быть вызвано с правильным значением.

Приведенный выше код был протестирован в Chrome и Firefox.

Мы используем PrimeNG версии 6.1.5

1 Ответ

0 голосов
/ 18 января 2019

Так вот рабочий код

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 { }

И вывод в браузере, как показано ниже. Да, это вызывает событие. Пожалуйста, отправьте полный код или отладьте его. Там нет ошибки. Я не установил шрифт-awesome, поэтому значки не отображаются должным образом. Этот код прекрасно работает и с табуляцией.

enter image description here

...