3

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?

anoop
  • 3,812
  • 2
  • 16
  • 28
Karolina
  • 137
  • 3
  • 17

2 Answers2

2

Just pass the valid states to the component:

<sibling-3 [validStates]="{sibling1: siblingForm1.valid, sibling2: siblingForm2.valid"></sibling-3>

And:

export class SiblingThree {
  @Input() validStates: any;
}

Then you can check like:

<button type="button" [disabled]="!validStates?.sibling1?.valid && !validStates?.sibling2?.valid">SAVE</button>

EDIT:

It's worth mentioning that this solution won't work unless you have the forms in the parent component and pass them in as @Inputs as well. So something like this:

<sibling-1 [form]="siblingFormOne"></sibling-1>
<sibling-2 [form]="siblingFormTwo"></sibling-2>
<sibling-2 [form]="siblingFormThree"></sibling-2>

And every sibling component would also have:

@Input() form: any; // Can be changed for FormGroup if that's what you're using

Then in each sibling component you would bind the form properties to the form property instead.

Chrillewoodz
  • 27,055
  • 21
  • 92
  • 175
1

You should use a service for that.

Inject your service in all of your components, and use a property such as AreBothFormsValid = true.

All you have to do now is use a *ngIfin your thrid component.