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

【问题标题】：Disable and enable two buttons for same condition(while typing in forms) angular禁用和启用相同条件的两个按钮（在输入表单时）
【发布时间】：2021-03-13 12:31:12
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript angular typescript angular6 angular5

【解决方案1】：

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

更直接的解决方案是替换

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

与

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

另外，更改 Add 按钮上的 [disabled] 绑定以使用来自 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 的值以重新计算

【讨论】：

但是我需要使用
@Leno 对不起，我一开始看错了。我已经更新了答案和 SB 链接。提交按钮需要从isin驱动，添加按钮需要使用checkTotal()返回的值
谢谢，但是当表单值的总和等于@Cineris 的总值时，添加按钮不会禁用
@Leno 来解决这个问题，您只需在第 66 行将 checkTotal 中的 if (sum > this.total) 更改为 if (sum >= this.total) 。Stackblitz 已更新
我还更新了 showError 调用的逻辑以同时使用 checkValue() 返回值和 this.isin

【解决方案2】：

您绝对是在正确的轨道上，但是如果您想要这种行为，您需要订阅 formControl 的 valueChanges 事件，在那里您检查总和是否等于、大于或小于您的预期值，并且启用/禁用按钮的布尔值。

https://angular.io/api/forms/AbstractControl#valueChanges

【讨论】：