How to get the formgroup values and show all of them on parent component

Question

I have a reactive form and I'm binding the data from db on the form on ngOninit and also doing the validations for the formcontrols and form array elements.

I have an another form which contains the same information for review before the submit and I'm able to bind those values in different component using the @Input().

I want that whenever I change anything on any formcontrol or formarray inside the form then it should reflect on the review form.

I have tried to subscribe the valueChange event of form in ngOnInit but it never hits whenever I'm changing any control or formarray value.

---

Please help how can I use the valueChange to get all the formcontrols and formarray value on form updated on review form whenever I update anything on the main form.

Answer 1

I'm able to get the values change on the form by adding the below line of code on the parent page in oninit. Previously I'm using this on the main form.

@Input() form: any; category:string;

this.form.get("category").valueChanges.subscribe(value => { this.category = value;

})

Answer 2

Can you please try using the valueChange event in the ngOnchange lifecycle method. If you want to pass the form values to the parent component you can either use an eventEmitter or make the formData as a Behaviour Subject (RxJS) and publish the data on every changes and subscribe the form data in the parent component.