Comment savoir quand l'utilisateur a terminé la saisie des éléments sous formes angulaires

Question

j'utilise des formes réactives angulaires pour construire une forme pour le tableau d'objets imbriqués. Je suis capable de tracer le formulaire et il fonctionne comme prévu, mais dans un scénario je veux pouvoir remplir une certaine zone de saisie avec les valeurs qui sont entrées dans l'interface utilisateur actuellement

Qu'est-ce que je veux? Ci-dessous est mon interface utilisateur comme vous pouvez le voir, j'ai un tableau de propriétés. Ce que je veux, c'est quand un utilisateur entre un nom de propriété. Je veux être en mesure d'ajouter que comme un tableau et afficher un menu déroulant pour le champ messageId (il est un composant kendo sélectionnez plusieurs)

Ce que je?

Pour écouter le changement propertyName j'ai utilisé le Observable que les formes angulaires fournit déjà pour chaque FormControl et écrit le code ci-dessous

var propertyNameControl: FormControl = new FormControl('', Validators.required); 

    propertyNameControl.valueChanges.forEach(
     (value: string) => { 
     console.log(value); 
     this.propertyList.push(value) 
     } 
    ); 

Mais l'événement valueChanges se déclenche pour chaque pression sur une touche unique au lieu de onblur. Donc, si l'utilisateur entre Apple comme le nom de la propriété.J'aurai (A, AP, APP ...) dans ma liste.

Question Comment puis-je souscrire à onblur événement de la boîte d'entrée du FormControl? Fondamentalement, je suis à la recherche de quelque chose comme propertyNameControl.onFocusOut.forEach()

Answer 1

Il semble que vous pouvez définir une option pour les contrôles à mettre à jour le blur plutôt que sur change:

const control = new FormControl('', {validators: Validators.required, updateOn: 'blur'}); 

ou pour template- formes entraînées

<form [ngFormOptions]="{updateOn: 'blur'}"> 

ou pour des éléments d'entrée individuels

<input [(ngModel)]="firstName" [ngModelOptions]="{updateOn: 'blur'}"> 

Je viens de voir, cela semble être angulaire 5 seulement (https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta4-2017-08-16, https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta3-2017-08-09)