How to apply form validation for nested components in angular2

Question

I have a demonstration of the plunker here:

http://plnkr.co/edit/LX1m2zIpxe3M1Zs5F6zA?p=preview

which has an address component nested in the parent component.

How can I apply form checks to an address component and get the values ​​of an address component in a submit form? Someone will tell me to get the form values ​​of nested components.

constructor(fb: FormBuilder) { this.myForm = fb.group({ 'name': ['', Validators.required], 'Phone': ['', Validators.required] }); 

}

How do I insert the values ​​of the address component in the parent? What is the best practice for this because I am new to creating forms in nested components. Please, help.

Answer 1

you can do it, but it will take some work. First you need to create intelligent and dumb component relationships, a dumb component containing html, and an intelligent component (parent) containing logic.

you can read about this template here

you need to use Angular @Input and @Ouput to get and send values ​​from the silent component.

then you can use Angular EventEmitter to send form values ​​back to the smart component

you can read more here

this can be done using form-driven forms. It looks like your current code is a combination of patterns and reactive ... I would look at this with reactive forms, it will be easier.

you can learn about reactive forms here