Angularjs - запретить пользователю вводить текст во время перехода пользователя к новому полю, если выполняется вызов API

Мое мобильное (ионное) приложение выполняет вызов API, когда пользователь вводит что-то в поле ввода и выполняет операцию «onblur» (фокусировка).

Если пользователь переходит к следующему полю ввода или просто нажимает на другое поле ввода, происходит «onblur» и выполняется вызов API (ajax) и изображение загрузчика появляется во время обработки запроса. Этот образ загрузчика на передней панели должен ограничивать пользователя от ввода в любое из полей ввода во время выполнения вызова.

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

У меня есть директива angular для элементов ввода - примерно так:

...
.directive('myCustomer', function() {
  return {
      restrict: 'E',
      require: '?ngModel',
      link: (scope, elem, attr, ngModel) => {

          elem.on('blur', event => {
              // some backend API call getting execute. I can get a promise back here.
              let promise = getData();
          }
          elem.on('focus', event => {

          }

      }
  };
});

Я хочу, чтобы поле ввода, на которое фокусируется пользователь, было отключено до тех пор, пока не будет выполнено обещание API.

Примечание: я мог бы сделать это с помощью некоторой трансляции событий и отключения / включения сфокусированного поля на основе обещания API разрешено или нет; но я чувствую, что это скорее взлом, поэтому хотел посмотреть, есть ли лучшие решения. Вот мое текущее решение -

 elem.on('focus', event => {
  scope.$on('UPDATE_PROGRESS', () => {
    elem.attr('disabled', true);
  })


  scope.$on('UPDATE_COMPLETE', () => {
    elem.attr('disabled', false);
  })
}

И я транслирую эти события перед вызовом API, а затем.

Я использую $ ionicLoading, чтобы показать изображение прогресса при вызове api.

Оцените любые предложения по этому поводу.

Заранее спасибо.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
47
1

Ответы 1

Так что лучший способ сделать это - не делать этого вообще, потому что периодически отключать поля - это плохой пользовательский опыт.

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

Спасибо frodo2975 за ответ. К сожалению, в этом приложении я не могу отклонить эти вызовы по разным архитектурным причинам. Каждое поле ввода имеет свои собственные бизнес-сценарии и динамически обновляет / создает другие поля ввода - я знаю, это немного безумно.

Arun 19.03.2018 17:52

Хм, динамическое построение формы - не такое уж безумие, но все же кажется, что вам не нужно отключать поля. Почему бы просто не разрешить пользователю редактировать его и при необходимости сделать еще один вызов? Обычный образец для вещей, которые делают частые вызовы, таких как поисковые вводы, - игнорировать результаты всех вызовов, кроме самого последнего.

frodo2975 19.03.2018 20:01

Другие вопросы по теме