Contrôles d'entrée primeNG menu contextuel paste - ngModel

Question

J'utilise les contrôles d'entrée PrimeNg (p-spinner, p-calendar). Malheureusement, la liaison [(ngModel)] = "valeur" ne se déclenche pas lorsque je sélectionne l'option de collage dans le menu contextuel à l'aide de la souris. Même si je clique sur le contrôle, le focus perdu n'est pas pris en compte. L'opération du clavier ctrl + v est correcte, mais l'option du menu contextuel de la souris serait plus importante. S'il vous plaît aider. Ma version actuelle: "primeng": "^ 4.1.3",

Answer 1

champ de saisie de calendrier ressemble:

<input #inputfield 
     type="text" 
     [attr.id]="inputId" 
     [attr.name]="name" 
     [attr.required]="required" 
     [value]="inputFieldValue" 
     (focus)="onInputFocus($event)" 
     (keydown)="onInputKeydown($event)" 
     (click)="datepickerClick=true" 
     (blur)="onInputBlur($event)" 
     [readonly]="readonlyInput" 
     (input)="onUserInput($event)" 
     [ngStyle]="inputStyle" 
     [class]="inputStyleClass" 
     [placeholder]="placeholder||''" 
     [disabled]="disabled" 
     [attr.tabindex]="tabindex" 
     [ngClass]="'ui-inputtext ui-widget ui-state-default ui-corner-all'"> 

lorsque vous copiez à partir du menu contextuel (keydown)="onInputKeydown($event)" est déclenché:

onInputKeydown(event) { 
    this.isKeydown = true; 
    if(event.keyCode === 9) { 
    this.overlayVisible = false; 
    } 
} 

puis (input)="onUserInput($event)"

onUserInput(event) { 
    // IE 11 Workaround for input placeholder : https://github.com/primefaces/primeng/issues/2026 
    if(!this.isKeydown) { 
    return; 
    } 
    this.isKeydown = false; 

    let val = event.target.value; 
    try { 
    let value = this.parseValueFromString(val); 
    this.updateModel(value); 
    this.updateUI(); 
    } 
    catch(err) { 
    //invalid date 
    this.updateModel(null); 
    } 

    this.filled = val != null && val.length; 
    this.onInput.emit(event); 
} 

il ressemble à IE 11 Solution de contournement provoque des problèmes supplémentaires avec des interactions sans clavier (comme coller via un clic droit). Ainsi, que le travail autour de définir this.isKeydown = true; sur l'événement de collage d'entrée.

1. Calendrier d'importation et ViewChild:

   import { Component, NgModule, ViewChild } from '@angular/core'; 
   import { CalendarModule, Calendar } from 'primeng/primeng'; 
   

2. get p référence du calendrier: HTML:

   <p-calendar #calendarRef [(ngModel)]="value"></p-calendar> 
   

   fichier TS:

   @ViewChild('calendarRef') calendarRef: Calendar; 
   

3. auditeur de pâte de registre ngAfterViewInit crochet:

   ngAfterViewInit() { 
       this.calendarRef.inputfieldViewChild.nativeElement.onpaste = (e) { 
       this.calendarRef.isKeydown = true; 
       } 
   } 
   

il devrait fonctionner maintenant,

plunker: https://plnkr.co/edit/SSI4XDxGtu1O59DJZfd4?p=preview

MISE À JOUR POUR SPINNER

1. ajouter référence tourbillonnement @ViewChild

2. registre onpaste auditeur spinner référence

   export class App implements OnAfterViewInit { 
       @ViewChild('calendarRef') calendarRef: Calendar; 
       @ViewChild('spinnerRef') spinnerRef: Spinner; 
   
       value: Date; 
   
       ngAfterViewInit() { 
       this.calendarRef.inputfieldViewChild.nativeElement.onpaste = (e) { 
        this.calendarRef.isKeydown = true; 
       } 
   
       this.spinnerRef.el.nativeElement.onpaste = (event) { 
        setTimeout(_ => { 
        this.spinnerRef.onInput(event, event.target.value); 
        }); 
       } 
       } 
   } 
   

   PLUNKER également mis à jour

Référence à onInput() Fonction: https://github.com/primefaces/primeng/blob/master/src/app/components/spinner/spinner.ts#L201