如何在所有输入更新之前禁止按“下一步”按钮答案

【问题标题】：How to forbid to press "next" button until all of inputs are updated如何在所有输入更新之前禁止按“下一步”按钮
【发布时间】：2018-08-28 10:05:45
【问题描述】：

我在一个页面上有 30 多个输入。每个输入在ng-blur（焦点丢失）上都有一个回调，它通过$http AngularJS 服务调用远程API。每个 api 请求都是异步并行运行的。用户可以多次编辑输入。每次触发ng-blur 事件时，数据都会发送到服务器。

我还在页面底部有一个“下一步”按钮，用户在编辑完页面上的输入后按下该按钮。如何禁止用户按下“下一步”按钮，直到每个 api PUT 承诺完成？如果服务器上出现 500 导致部分 HTTP 请求失败怎么办？

【问题讨论】：

标签： javascript angularjs asynchronous promise synchronization

【解决方案1】：

在组件中使用标志finished。

在视图中 =>

<button type="submit" [disabled]="!finished">Add</button>

在组件中 =>

public finished = false;

在 Promise =>

   let promise1 = Promise.resolve(3);
   let promise2 = 42;
   let promise3 = new Promise(function(resolve, reject) {
      setTimeout(resolve, 100, 'foo');
    });

Promise.all([Promise1,Promise2,....]).then((...)=> {
  finished =true; // your button will be enabled!!
})

您可以通过here了解更多信息

或

您可以为每个承诺使用标志 =>

public promiseF1 = false;
public promiseF2 = false;
public promiseF3 = false;
etc...

对于每个呼叫，在开始时将其设为false，在呼叫结束时将其设为true。

所以 html 看起来像这样 =>

<button type="submit"[disabled]="!promiseF1 && !promiseF2 && !promiseF3 && etc...">
 Add
</button>

【讨论】：

我有多个承诺，我需要一种方法来同步它们，这就是问题
使用 Promise.all() :)
那么如何将页面编辑过程中可能出现的所有promise全部累积起来呢？简单地将它们添加到数组中会导致内存泄漏
我需要更多数据才能继续，也许给我们示例代码示例？？ .虽然 Promise.all() 会异步运行所有的 Promise。
我已经编辑了这个问题。抱歉，无法重现示例，它太大了。

【解决方案2】：

在每个输入字段中放置“必填”输入参数，这样您可以确保在提交按钮激活之前，来自不同承诺的所有响应都已填满。

然后在提交按钮上检查表单的有效性。

<form  #form="ngForm">
    //Your input fields with required paramets

  <button type="submit" [disabled]="form.invalid">Next</button>

</form>

【讨论】：

所有字段可能都是有效的，然后用户可能突然决定快速编辑其中一些字段。在这种情况下，有效性不是解决方案。
@JerrySmith 验证将失败。用户不能比电脑快:)
@JerrySmith 图片不够清晰，如果你能重现你的问题会更容易。正如 Gaurav_soni 所提到的，我也认为使用验证肯定会解决您的问题。

【解决方案3】：

我已经通过实施一些类似信号量的解决方案解决了这个问题。最初，信号量计数器为零。每次创建承诺时我都会增加计数器，并在每次承诺解决或拒绝时减少计数器（在.finally() 中）。只要计数器为零，用户就可以使用“下一步”按钮。

【讨论】：