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.

score 0 · Answer 1 · answered Sep 20 '19 at 15:06

0

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

answered Sep 20 '19 at 15:06

Poojan Gajera

44
2

Thanks @Poojan, I gave a try but it doesnt working. Is it possible for you edit the stackblitz? – Gopikrishna Mandapati Sep 20 '19 at 21:03
@GopikrishnaMandapati Caught up in some work but you can refer to this blog its self explanatory [link](https://blog.angularindepth.com/angular-nested-reactive-forms-using-cvas-b394ba2e5d0d) – Poojan Gajera Sep 23 '19 at 15:44

score 0 · Answer 2 · answered Sep 20 '19 at 15:24

0

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>

answered Sep 20 '19 at 15:24

rafi muhammad

194
2
11

I want to include child components in the same form and I should also able to validate the elements (including child components). – Gopikrishna Mandapati Sep 20 '19 at 21:05

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

2 Answers2