Отключить кнопку от другого компонента, если форма в компоненте одного уровня недопустима

Question

У меня есть обертка с 3 компонентами (скажем, 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>

В sibling1 и sibling2 у меня есть формы, в sibling3 у меня есть кнопки действий.

Я хочу отключить кнопку ("сохранить") в sibling3, если форма sibling1 и sibling2 недействительны

лайк:

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

сейчас мой sibling3 не знает, что такое sibling1Form и sibling2Form, поэтому он показывает ошибку

Cannot read property 'valid' of undefined

Как я могу сказать кнопке, если эти формы действительны или нет?

Answer 1

Просто передайте valid состояния к компоненту:

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

А также:

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

Тогда вы можете проверить, как:

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

РЕДАКТИРОВАТЬ:

Стоит отметить, что это решение не будет работать, если у вас нет форм в родительском компоненте и вы передаете их как @Inputтакже. Так что-то вроде этого:

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

И каждый родственный компонент также будет иметь:

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

Затем в каждом компоненте-родственнике вы должны связать свойства формы с form собственность вместо

Answer 2

Вы должны использовать сервис для этого.

Введите ваш сервис во все ваши компоненты и используйте свойство, такое как AreBothFormsValid = true,

Все, что вам нужно сделать сейчас, это использовать *ngIfв вашем третьем компоненте.