angular - Disable/Enable submit button in parent component when forms are in child component

Question

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.

Answer 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"