2017-07-19 2 views
2

Je suis un peu nouveau à angulaire 4. J'essaie d'obtenir l'événement de changement d'un champ de saisie à l'intérieur d'une directive. Je travaille actuellement avec @HostListenerComment obtenir l'événement de changement dans le champ de saisie pour une directive en angulaire 4

@HostListener('keyup', ['$event']) 
    inputChanged(event) {} 

Cela fonctionne correctement, mais cet événement est déclenché après un certain délai de libération de clé et l'utilisateur peut entrer erreur de saisie et est en mesure de voir aussi. Dans ma mise en œuvre, j'ai supprimé l'entrée invalide mais cela ne donne pas une bonne exposition à l'utilisateur. La seule chose que je veux est d'obtenir l'événement de changement dès que le changement se produit dans le champ de saisie (caractère/chaîne entrer ou supprimer les deux). HTML actuel ressemble à ce

<input type='text' class="form-control" placeHolder='hh:mm:ss' time-input [(ngModel)]="params.time" name="time"/> 

PS. time-input est le nom de la directive et dans la directive j'essaye d'obtenir l'événement change et je ne veux pas déplacer n'importe quelle implémentation au contrôleur ou au composant.

+0

souhaitez-vous obtenir l'événement DOM natif ou d'un événement de directive 'ngModel'? –

+0

Je n'ai aucune restriction pour l'utilisation de n'importe quel type d'événement.je utilisais l'événement natif DOM au début, mais il y avait un problème dans cela, mais la réponse de @ gunter a fonctionné et il est maintenant besoin –

+0

élément natif. La solution de Gunter ne fonctionnera que s'il y a une directive 'ngModel' sur' l'entrée'. –

Répondre

4

Utilisez

@HostListener('ngModelChange', ['$event']) 
+0

Merci. Travaillé comme un charme –

+0

Heureux d'entendre :) –

+0

Que faire si je n'utilise pas ngModel? – anaval