2

I have a scenario which is like that

I need a form wrapped around components

and HTML structure should like below:

<form #f="ngForm" (ngSubmit)="clickForm(f)">
   <app-component-1></app-component-1>
   <app-component-2></app-component-2>
   <button type="submit">Submit</button>
</form>

And each component has specific set of inputs, and whole structure look like this:

<form #f="ngForm" (ngSubmit)="clickForm(f)">
   <app-component-1>
        <input type="text" name="name" #name="ngModel" ngModel required />
        ..so on upto 10 inputs
   </app-component-1>
   <app-component-2>
        <input type="text" name="name2" #name2="ngModel" ngModel required />
        ..so on upto 10 inputs
   </app-component-2>
   <button type="submit">Submit</button>
</form>

But Form Validations not working. and Form status us always VALID. Any suggestion please?

Gags
  • 3,759
  • 8
  • 49
  • 96
  • My suggestion is to use a model driven form. I have yet to found a good solution for template driven forms and child components. Passing nested formgroups to children is much easier and convenient :) – AT82 Jun 30 '17 at 16:53
  • Any simple example can be helpful. As i am not sure on how to access child formgroups in super parent component – Gags Jun 30 '17 at 17:10
  • If you want to go with a template driven form, you want something like this, I have not tried this code though: https://stackoverflow.com/a/43411549/7741865 With a model driven form, when you pass just the nested formgroups, parent will catch every change automatically, which is great :) It's really more maintainable with model-driven form, where you have tight control over the form. https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2 But ultimately the choice is up to you! My suggestion is model-driven approach tho, that you probably have figured out :D – AT82 Jun 30 '17 at 17:17

0 Answers0