I want to create a reactive form with multiple components and would like to validate all mandatory fields when user clicks Submit button

Question

I would like to create a angular reactive form with multiple sub components.

I would like to validate Parent and child form components in one go (When user clicks Submit button).

In my current scenario I was able to show the error message only in the parent form but not in the child components unless I touch those in the child components.

Here are the stackblitz Editor link --> https://stackblitz.com/edit/angular-kenydb

App link --> https://angular-kenydb.stackblitz.io

Any help is much appreciated.

Answer 1

use the same form group for children elements as well, no need to create a separate form group or child elements.

Answer 2

You can use form group and add all the elements inside on form group.

<form [formGroup]="userForm" (ngSubmit)="onFormSubmit()">
  Name: <input formControlName="name"  placeholder="Enter Name">
  Age: <input formControlName="age"  placeholder="Enter Age">
  <button type="submit">Submit</button> 
</form>