プリムカレンダーで選択した日付に[（ngmodel）を変更しました

Question

ngprime datepickerを使用して作成した日付ピッカー付きの入力要素があります。

<p-calendar showAnim="slideDown" 
      id="calendar" 
      [showIcon]="true 
      [(ngModel)]="myDate" 
      (blur)="onBlurMethod($event)"> 
</p-calendar> 

HTMLパートは、ここで私はprimeng DatePickerのタグを使用していました。 私は1つの隠しテキストボックスを使用しましたので、更新された値を選択できますが、テキストボックスに反映されていますが、どのようなイベントでも更新された値を取得するにはどうすればよいでしょうか。

<input type="hidden" id = "datePickerText" [ngModel]="myDate"> 

ユーザーが入力要素に直接入力することで日付を変更すると、上記のようにinput要素のblurイベントで値を取得できます。しかし、ユーザーがdatepickerから日付を変更すると（すなわち、カレンダーの日付をクリックすることによって）、ブラーハンドラは呼び出されません。

入力要素に入力するのではなく、datepickerで行われた選択した日付の変更を検出するにはどうすればよいですか？

Answer 1

PrimeNG calendarには、使用可能な2つのイベント、onBlurとonSelectがあります。

だから、あなたはおそらくblurの代わりにonBlurを使用するようにコードを変更したい：

<p-calendar showAnim="slideDown" 
      id="calendar" 
      [showIcon]="true" 
      [(ngModel)]="myDate" 
      (onBlur)="onBlurMethod($event)"> 
</p-calendar> 

Answer 2

別のアプローチは、直接変化を検出するためにgetとsetプロパティを使用することができます。それが不必要に実行されていないこと - あなたはロジックがトリガされているときにあなたが知っていることを確認する必要があります選択したどちらの方法

private _startDate: Date; 

set startDate(date: Date) 
{ 
    this._startDate = date; 
    alert('changed'); 
} 

get startDate(): Date 
{ 
    return this._startDate; 
} 

。この方法は煩雑になる可能性があり、懸案事項の分離があり、トリガーの結果としてリモート呼び出しを行う必要がある場合はおそらく推奨されません。

Answer 3

(ngModelChange)="yourMethod()"を使用できます。