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

У меня есть оболочка с 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

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


angular forms angular2-forms disabled-input
person Karolina    schedule 24.05.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Просто передайте состояния 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>

ИЗМЕНИТЬ:

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

<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.

person Chrillewoodz    schedule 24.05.2017

arrow_upward
1
arrow_downward

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

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

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

person Community    schedule 24.05.2017