2

I have a scenario where I am accessing two different NgForm one within Parent form #parentform and other in the Child component #childForm, and i want to check the validity of the controls of child form wether valid or not in parent component form. How to do this in angular4.

I also followed this link: Check if a form is valid from a parent component using Angular 4

everytime i am getting undefined for the reference of child component form.

My code is something like this.

parent.component.html

    <form class="form-wrapper" (ngSubmit)="parentForm.form.valid && save()" #parentForm="ngForm" novalidate>
        <input id="firstName" type="text" placeholder="" class="validate" name="firstName" [(ngModel)]="firstname_" #firstName="ngModel" required>                        
    </form>
    <child-component></child-component>

child.component.html

 <form class="form-wrapper" (ngSubmit)="childForm.form.valid && save()" #childForm="ngForm" novalidate>
        <input id="phoneNumber" type="text" placeholder="" class="validate" name="phoneNumber" [(ngModel)]="phone_" #phoneNumber="ngModel" required>                        
 </form>

Now i want to validate the child component form "childForm" valid or not in parent form

mpunit30
  • 381
  • 9
  • 26
  • Can you setup reproduction on stackblitz? – yurzui Nov 29 '17 at 11:12
  • Okay. I will do the same and let you know in few minutes – mpunit30 Nov 29 '17 at 11:15
  • Please follow the link... https://stackblitz.com/edit/angular-cjorjz. Now i want to disable the save button until both the form controls are invalid only after the valid of both the forms i want to enable the button – mpunit30 Nov 29 '17 at 11:35
  • How to access the NgForm using reference variable ?? Something like parentForm.form.valid and childForm.form.valid ?? – mpunit30 Nov 29 '17 at 11:43
  • https://stackblitz.com/edit/angular-42ai2t?file=app/parent/parent.component.html – yurzui Nov 29 '17 at 11:44
  • Ok great what if i want to enable/disable particularly for each form. Like if my parent form is valid then save button gets enable and if i enter phone number then again save gets enable like separation of concern for each respective form ?? is it possible ?? Because I have collapsible component total 3 tabs.. now for each tab i am using same button "Save" for all 3 tabs. Each tab has different forms... So 1st tab f1, 2nd tab f2, 3rd tab child component form.... So whatever form i editing i should be able to access each form and its dirty state.. – mpunit30 Nov 29 '17 at 11:48
  • `How to access the NgForm using reference variable ?? Something like parentForm.form.valid and childForm.form.valid` https://stackblitz.com/edit/angular-mgrgvj?file=app/parent/parent.component.html – yurzui Nov 29 '17 at 11:53
  • Great @yurzui. thanks a lot for the help really damn good, just saved my time thank you. your solution is exactly what i was looking for.. Thank you very much – mpunit30 Nov 29 '17 at 12:00
  • @yurzui last but not the least what if my child component has multiple forms ?? how to achieve then?? – mpunit30 Nov 29 '17 at 12:02
  • There are `ViewChildren` for that purpose – yurzui Nov 29 '17 at 12:04
  • Can you narrate in the stackblitz with one scenario ?? – mpunit30 Nov 29 '17 at 12:05
  • You can create separate question with prepared example – yurzui Nov 29 '17 at 12:09
  • Okay... but when i am using same as prepared example i am facing error 'Cannot read property 'form' of undefined' and this gives me error at return this.childComponent.form; line .... what should is do?? – mpunit30 Nov 29 '17 at 12:14
  • Posted new question for multiple forms within child component check https://stackoverflow.com/questions/47552708/how-to-validate-the-child-component-ngforms-having-3-different-ngform-from-the-p – mpunit30 Nov 29 '17 at 12:18
  • It works!!! Thanks..... – mpunit30 Nov 29 '17 at 12:43
  • You can try something like this in the first answer of this question. https://stackoverflow.com/questions/42955606/angular-2-validation-together-with-the-child-component – kasunb Feb 19 '18 at 11:20

0 Answers0