时间戳

首页 > 解决方案 > 如何在所有输入都更新之前禁止按“下一步”按钮

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

问题描述

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

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

标签： javascriptangularjsasynchronouspromisesynchronization

解决方案

在组件中使用标志finished。

在视图中=> 

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

在组件中 =>

public finished = false;

在承诺 =>

   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!!
})

您可以从这里了解更多信息

或者

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

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

对于每个通话，在开始时 make itfalse和在通话结束时 make it true。

所以 html 看起来像这样 =>

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

推荐阅读