Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
561 views
in Technique[技术] by (71.8m points)

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

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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"


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...