禁用按鈕，如果形式在同級組件是無效

我有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

如何告訴按鈕如果這些形式是否有效？

來源

2017-05-24 Karolina

您應該爲此使用服務。

將您的服務注入到所有組件中，並使用AreBothFormsValid = true等屬性。

您現在要做的就是在第三個組件中使用*ngIf。

來源

2017-05-24 14:08:28 trichetriche

只需通過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 s傳遞，否則此解決方案將不起作用。因此，像這樣：

<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屬性。

來源

2017-05-24 14:09:11 Chrillewoodz

禁用按鈕，如果形式在同級組件是無效

回答

相關問題