javascript - 如何禁止按下 "next"按钮，直到所有输入都更新

Question

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

我还在页面底部有一个“下一步”按钮，用户在完成页面上的输入编辑后按下该按钮。如何禁止用户在每个 api PUT promise 完成之前按“下一步”按钮？如果某些 HTTP 请求因服务器上的 500 而失败怎么办？

Answer 1

在组件中使用标志 finished。

在 View 中=>

<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 了解更多信息

或

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

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

对于每个调用，在开始时将其设置为false，在调用结束时将其设置为true。

所以 html 看起来像这样 =>

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