Passing Form Values to Child Components in Angular

Question

I have a problem separating the form to the other components. I need to put all the logic/functionalities in the parent/main component and display it on child components. Like the submit function should be on the parent component.

stackblitz

   <form [formGroup]="personalInfoForm" (ngSubmit)="onRegister(personalInfoForm)">
       <app-personal-info [personalInfoForm]="personalInfoForm" [submitted]="submitted"></app-personal-info>
   </form>

Answer 1

Your code had multiple issues:

1. you can't access the FormGroup properties directly you need to use a getter i.e .get('email')

2. you need to put the submit button next to the parent form, not inside the child component

stackBlitz