We would like to consume child reactive form data from parent when we click on parent button. Currently we are using viewchild for getting the child cpomponent reference. We
Wrap your child form Inside form element so that you can submit your child form from parent, Then Inject FormGroupDirective in child component to get ref of parent form
Then use controlContainer to provide the existing FormGroupDirective in child component
childcomponent.ts
form;
constructor(private fb: FormBuilder, @Host() private parentFor: FormGroupDirective) { }
ngOnInit() {
this.form = this.parentFor.form;
//Add FormControl as per your need
this.form.addControl('child', this.fb.group({
name: "",
email: ""
}))
}
child.component.html
Example:https://stackblitz.com/edit/angular-xusdev