I'm new to Angular and I have a task that I can't seem to find the best approach to do it. I have a parent component which haves 3 child components, which looks like the picture bellow.

When the user clicks on the save button, which is in the parent controller, if the forms are valid then all the form inputs from Child 1 and Child 3, and the list of items from the Child 2, will have to be saved into the database. To the web api, just one call will be made, and one single object will be sent (the object will have some strings and a list of items).

I've read there are multiple ways to communicate between parent and child components, but I am not sure what is the best one in this case.
If I use ViewChild, then the parent will have knowledge of the other components so they will be tight coupled.
If I use Input/Output, then I must find a way to emit all the values on click but only if the forms are valid.(something I haven't found how to do)
If I use services, I don't know it will help with form validity and returning the form values?

For these cases when the parent communicates with multiple sub-components and complex objects is there a best approach? Any information or help regarding this topic will be very appreciated.

[![enter image description here](https://i.stack.imgur.com/1WIH3.png)](https://i.stack.imgur.com/1WIH3.png)