如果同级组件中的表单无效，则禁用另一个组件的按钮

Posted 2023-02-22

【中文标题】如果同级组件中的表单无效，则禁用另一个组件的按钮

【英文标题】：disable button from another component if form in sibling component is not valid

【发布时间】：2017-10-24 22:33:36

【问题描述】：

我有 3 个组件的包装器（比如说兄弟 1、兄弟 2、兄弟 3）

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

在兄弟 1 和兄弟 2 中我有表单，在兄弟 3 中我有操作按钮。

如果兄弟1表单和兄弟2表单无效，我想禁用兄弟3中的按钮（'保存'）

喜欢：

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

现在我的兄弟3不知道什么是兄弟1Form和兄弟2Form所以它显示错误

Cannot read property 'valid' of undefined

如何判断这些表单是否有效？

【参考方案1】：

您应该为此使用服务。

在所有组件中注入您的服务，并使用诸如AreBothFormsValid = true 之类的属性。

您现在要做的就是在您的第三个组件中使用*ngIf。

【参考方案2】：

只需将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 属性。