0

I need a help with nested components template driven form validation in Angular 4. We have a stepper control with 4 steps and each step has its own ngForm. Each form has nested components like below

<Stepper1>
<ParentComponent1 ngForm>
            <ChildComponent1>
                        <GrandChildComponent1></GrandChildComponent1>
</ChildComponent1>
</ParentComponent1>
</Stepper1>

I am doing few validations in GrandChildComponent1 but how do we need to make the ParentComponent form as invalid when user doesn’t enter something in GrandChildComponent? I tried by mentioning SkipSelf in viewproviders of child component such that it skips itself and registers to its parent form, as mentioned in below article. It works for ChildComponent but when we do the same for GrandChildComponent somehow it doesn’t work. Angular2 nested template driven form

viewProviders: [{
   provide: ControlContainer,
   useFactory: (container: ControlContainer) => container,
   deps: [[new SkipSelf(), ControlContainer]],
}]

Another article which we are following to fix this issue https://medium.com/@a.yurich.zuev/angular-nested-template-driven-form-4a3de2042475

Can someone help us on this issue. Please let us know if you need more details.

Praveen
  • 13
  • 3
  • can you create stackblitz – Chellappan வ Nov 27 '18 at 16:32
  • Hi, we (at work) have been working on that topic and I gave a proper answer you may want to check here https://stackoverflow.com/a/55457210/2398593 :) (and we've solved the error issue and can retrieve all the errors from children) – maxime1992 Apr 01 '19 at 14:17

0 Answers0