-3

I am using angular reactive forms and I have child components which have forms but submit button is on parent component so I want to restrict the user to go next page by clicking submit button(parent component) based on the form validation in child components. My queston is how parent component ts will know that validation of forms in child components has been done

<div class="parent">
<child-form-component></child-form-component>
<button type="submit">Submuit</button>
</div>

Below is the link of stackblitz of sample code stackblitz link

Hello component have form and parent component is app component. We are using store, actions and reducers so i dont want to go by subscribe method.

Sahil Kkr
  • 195
  • 4
  • 24
  • I recommend you to take a look at this: https://angular.io/guide/component-interaction – Ploppy Feb 06 '19 at 22:06
  • how can I pass data from child to parent just after completion of validation? – Sahil Kkr Feb 06 '19 at 22:10
  • In order to determine if the form is valid or not: `this.myForm.statusChanges.subscribe(result => { console.log(result); });`, and in order to communicate, read the documentation above. – Ploppy Feb 06 '19 at 22:12
  • We are using ngrx, so doing this approach would be very complex, I am sure there will be some other way to solve this issue – Sahil Kkr Feb 06 '19 at 22:29
  • @Ploppy this article solved my issue https://medium.com/@joshblf/using-child-components-in-angular-forms-d44e60036664. I was looking for same kind of approach – Sahil Kkr Feb 06 '19 at 23:04
  • You should have read the official doc I posted in my first comment, there are many ways to communicate between component, this one was listed. Glad you fixed it! – Ploppy Feb 07 '19 at 08:58

1 Answers1

1

In this case, you can simple use a "reference variable" and ask about "reference variable".emailform.invalid

<div>
    <!--use a "reference variable" to can refered to the component-->
    <hello #form></hello>
    <div class="form-group">
        <button class="btn btn-primary" [disabled]="form.emailForm?.invalid">Submit</button>
  </div>
</div>
<!--just for "check" -->
{{form.emailForm?.value|json}}

See that "form" is the component. the component has a variable "emailForm"

Eliseo
  • 50,109
  • 4
  • 29
  • 67