时间戳

首页 > 解决方案 > 禁用和启用相同条件的两个按钮（在输入表单时）

javascript - 禁用和启用相同条件的两个按钮（在输入表单时）

问题描述

我有一个名为value的表单域。我有一个添加按钮。当我单击添加 按钮时，它会复制表单字段。我已经编写了这样的代码，当我在表单字段中输入一个值（比如 40）然后单击添加按钮并输入另一个值说（50）时，我有一个函数可以将这些值的总和相加并将其与上面的总值。如果它大于总值，则会弹出一条错误消息。

现在我需要的是，当我的表单值的总和等于上面的总值时，我需要禁用添加按钮并启用我的提交[disabled]="isin"按钮。我通过使用 并分配布尔值来禁用和启用以某种方式尝试了它。但是这并没有像我预期的那样工作。（因为如果我输入一个大于totalvalue的值，添加按钮会被禁用，当我按下退格键时它仍然被禁用）

注意：如果我的问题不清楚，请在下方评论

我的 stackblitz 链接：https ://stackblitz.com/edit/angular-ivy-fc8tcl?file=src%2Fapp%2Fapp.component.html

标签： javascriptangulartypescriptangular6angular5

解决方案

在您的 SB 示例中，围绕切换 的值的逻辑在this.isin设置为 后不会重新触发true。

一个更直接的解决方案是替换

if (this.total <= sum) {
  this.isin = !this.isin;
}

和

this.isin = this.total === sum;

此外，更改[disabled]Add 按钮上的绑定以使用调用返回的值checkTotal，并用于isin绑定到 Submit 按钮，如下所示

<button ... [disabled]="!checkTotal()" ><span class="fa fa-plus"></span>Add</button>
...
<button type="submit" ... [disabled]="!isin">Submit</button>

工作 SB 链接： https ://stackblitz.com/edit/angular-ivy-mwywpt?file=src/app/app.component.ts

还有一点需要注意：checkTotal()删除值时不会调用，因此您必须更改其中一个输入值以获取isin重新计算的值

推荐阅读