Как запретить нажимать кнопку «Далее» до тех пор, пока все входы не будут обновлены

Question

У меня более 30 входов на одной странице. Каждый вход имеет обратный вызов ng-blur (потеря фокуса), который вызывает удаленный API через службу $http AngularJS. Каждый запрос API выполняется асинхронно параллельно. Пользователь может редактировать ввод несколько раз. Каждый раз, когда происходит событие ng-blur, данные отправляются на сервер.

У меня также есть кнопка «Далее» в нижней части страницы, которую пользователь нажимает, когда он / она заканчивает редактировать вводимые данные на странице. Как запретить пользователю нажимать кнопку «Далее» до тех пор, пока не будет выполнено каждое из обещаний api PUT? А что делать, если некоторые из HTTP-запросов не сработали из-за 500 на сервере?

Answer 1

Поместите «обязательный» входной параметр в каждое из полей ввода, таким образом, вы можете убедиться, что все ответы от разных обещаний заполняются до того, как кнопка подтверждения станет активной.

А затем проверьте правильность формы на кнопке отправки.

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

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

</form>

Answer 2

Я решил эту проблему, реализовав семафороподобное решение. Первоначально счетчик семафоров равен нулю. Я увеличиваю счетчик каждый раз, когда обещание создается, и уменьшаю его каждый раз, когда обещание разрешается или отклоняется (в .finally()). Когда счетчик равен нулю, кнопка «Далее» доступна для пользователя.

Answer 3

Используйте флаг 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...

Для каждого звонка в начале сделайте false, а когда в конце звонка сделайте true.

Так что HTML будет выглядеть так =>

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