Angular 3 形成 2 任一条件禁用按钮

Posted 2023-03-13

【中文标题】Angular 3 形成 2 任一条件禁用按钮

【英文标题】：Angular 3 forms 2 either condition disable button

【发布时间】：2018-06-20 07:25:53

【问题描述】：

在我的 Angular 项目中，我有 3 个表单

这是结构

 --form1
   --form2
   --form3

在我的表单 1 中有表单 2 和表单 3。如果表单 1 无效并且其他 2 个表单之一无效，我想禁用该按钮，请禁用该按钮。如果表单 1 有效，则表单 2 或表单 3 中的任何一个都有效，则应启用该按钮。

我尝试过这种情况

<button [disabled]="!form1.valid || (!form2.valid || !form3.valid)" />

提前致谢

【参考方案1】：

试试 <button [disabled]="!form1.valid && (!form2.valid || !form3.valid)" />

【讨论】：

不工作！我已经尝试过这种组合，第一个条件是 form1 应该是无效的，第二个条件是（forms 2 或 3 应该是无效的）来禁用按钮。但如果表单 2 或 3 中的任何一个有效，则按钮应处于启用状态

如果表格2或表格3有效，表格1无效，会发生什么？

按钮启用！

感谢您的回复哥们，我得到了解决方案。它是[disabled]="!form1.valid || (!form2.valid && !form3.valid)"，当表单1无效并且（表单2或表单3无效）时禁用按钮，并在表单1有效并且表单2或3中的任何一个有效时启用。