Déclencheur angulaire EventEmitter chaque fois que le contenu de l'objet est modifié

Question

J'utilise un composant enfant pour créer un objet complexe constitué de tableaux enfants et d'objets récursifs. Je voudrais un moyen d'accéder à cet objet dans le composant parent en utilisant la liaison en direct.

Les valeurs dans l'objet changent en fonction de l'entrée de l'utilisateur (boîtes, entrées, etc.), donc j'ai besoin d'un moyen pour émettre l'objet EventOnput() et transmettre l'objet entier.

Des idées sur la façon d'accomplir ceci ou y a-t-il une autre voie que je peux prendre? Voir un code de concept ci-dessous, dans lequel l'entrée a une liaison de données bidirectionnelle à une valeur profonde dans l'objet complexe, et j'ai besoin d'émettre cette modification à un parent en détectant le changement d'une manière ou d'une autre. Le formulaire actuel est plus complexe, donc je voudrais éviter d'utiliser des événements spécifiques comme regarder pour un changement dans chacune des entrées pour déclencher manuellement l'émetteur d'événements si possible.

modèle parent:

<child-component (emitter)="emitterHandler($event)"></child-component> 

composant parent:

emitterHandler(obj){ console.log(obj); } 

composant enfant:

@Output() emitter: EventEmitter<any> = new EventEmitter();  
complexObj = {data: 'test', lines: [{data: 'asd', time: 123},{data: 'xcv', time: 233}]}; 

modèle de l'enfant:

<input [(ngModel)]="complexObj.lines[0].data"></input> 

Answer 1

Vous pouvez utiliser valueChanges du NgForm:

Component

@ViewChild('myForm') myForm: NgForm; 

// this will be called when any input inside the form changes 
this.myForm.valueChanges.subscribe(val => { 
    // emit the event 
}); 

Modèle

<form #myForm='ngForm' ...> 
    // your select , input or nany form elements 
</form> 

code ci-dessus est pour la forme conduit de modèle,

Voici l'article pour forme axée sur les données à ce sujet: https://alligator.io/angular/reactive-forms-valuechanges/

---

Une bonne façon d'aller est:

this.myForm.statusChanges.subscribe(res => { 
    if (res === 'VALID') { 
     // emit(this.myForm.values) 
    } 
}); 

Cela émette les valeurs lorsque les données sont valides, et dans le code ci-dessus, aucune valeur de matière est juste ou faux, il va déclencher l'événement.