为相同条件禁用和启用两个按钮（在表单中键入时）angular

Question

我有一个名为 value 的表单域。我有一个 add 按钮。当我单击 add 按钮时，它复制了表单域。我以这样的方式编写代码，当我在表单域中输入一个值（比如 40），然后单击 add 按钮并输入另一个值（比如（50））时，我有一个添加的函数将这些值的总和与 Totalvalue above.If 进行比较，它大于 totalvalue 弹出错误消息。

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

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

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

Answer 1

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

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

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

和

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

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

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

在职 SB link: https://stackblitz.com/edit/angular-ivy-mwywpt?file=src/app/app.component.ts

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

Answer 2

你肯定是在正确的轨道上，但如果你想拥有那种行为，你需要订阅 formControl 的 valueChanges 事件，在那里你检查总和是否等于、大于或小于你的预期值，以及 enable/disable 按钮的布尔值。

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

为相同条件禁用和启用两个按钮（在表单中键入时）angular

Disable and enable two buttons for same condition(while typing in forms) angular

javascript

typescript

angular

angular5

angular6