disable button from another component if form in sibling component is not valid

Viewed 2307

I have wrapper with 3 component (let say sibling1, sibling2, sibling3)

<div class="m-row m-row--forms column1">
      <div class="column2"><sibling1></sibling1></div>
      <div class="column2"><sibling2></sibling2></div>
      <div class="column1"><sibling3></sibling3></div>
</div>

In sibling1 and sibling2 i have forms, in sibling3 I have action buttons.

I want to disable button ('save') in sibling3 if sibling1 form and sibling2 form are invalid

like:

<button type="button" [disabled] ="!sibling1Form.valid && !sibling2Form.valid">SAVE</button>

right now my sibling3 doesn't know what is sibling1Form and sibling2Form so it show error

Cannot read property 'valid' of undefined

how can I tell button if these forms are valid or not?

2 Answers
Related