Угловая проверка ввода после выбора

Я использую angular (версия 1.3.9) и angular-ui/typeahead из http://angular-ui.github.io/bootstrap/ (версия 0.12.0).

В моем веб-приложении пользователь должен быть вынужден выбрать один из вариантов, предлагаемых в раскрывающемся списке typeahead/autocomplete, поэтому я установил <input typeahead="..." typeahead-editable="false" .../>.

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

Этот временной интервал обычно меньше секунды (в зависимости от того, как быстро пользователь отпускает кнопку мыши). Но все же это очень плохой пользовательский опыт, если ошибка появляется в этот небольшой период времени.

Могу ли я изменить порядок выполнения соответствующих директив? Например. ng-select следует вызывать перед ng-blur?

Какие варианты решения проблемы вы знаете?

Вы можете протестировать поведение на http://co2offset.atmosfair.de/flight/offset. Просто введите в аэропорту выберите вариант из выпадающего списка и удерживайте нажатой кнопку мыши. Затем вы увидите красное сообщение об ошибке, которое вы не должны видеть.


angularjs angular-ui-typeahead
person tschmid    schedule 19.01.2015    source источник
comment
Я еще не мог решить проблему. Кто может помочь? Есть идеи? Любые вопросы? Что-то непонятно?   -  person tschmid    schedule 07.02.2015
comment
Я все еще не мог решить проблему. Любая помощь высоко ценится!!!   -  person tschmid    schedule 05.03.2015
comment
У меня была аналогичная проблема, когда пользователь должен выбрать некоторые параметры, используя ввод текста, и сообщение об ошибке должно отображаться только тогда, когда выбрано менее 2 параметров. Я преодолеваю это ограничение, определяя директиву для проверки только выбранных параметров и использования form.$error.<directive>[0].$touched && form.$error.<directive>[0].$invalid.   -  person Lukasz Lenart    schedule 05.11.2018

Ответы (1)


arrow_upward
2
arrow_downward

У меня была такая же проблема совсем недавно. В итоге я отключил кнопку отправки, пока не было выбрано значение. Итак, моя форма выглядит так:

   <form name="searchForm" class="clearfix" ng-controller="searchFormController">
            <div class="form-group col-md-8 group-1">
                <label>Book</label>
                <input name="txtBookTitle"
                       type="text"
                       class="form-control"
                       ng-model="book"
                       placeholder="Enter book title"
                       typeahead-min-length="3"
                       typeahead-editable="false"
                       typeahead="book as book.Title for book in getBookTitles($viewValue)"
                       typeahead-input-formatter="book.Title"
                       typeahead-loading="loadingbooktitles"
                       required>
                <i ng-show="loadingbooktitles">
                    <img src="~/Content/images/ajax-loader.gif" />
                </i>
                <span ng-show="searchForm.txtBookTitle.$error.required">Booktitle is required</span>
            </div>
            <div class="form-group col-md-4 padding-top-25 text-right">
                <input type="submit" value="Submit" class="btn btn-primary" ng-click="formSubmit()" ng-disabled="searchForm.$invalid" />
            </div>
        </form>

Ключом является ng-disabled="searchForm.$invalid". Похоже, он работает достаточно хорошо, чтобы пользователи не опережали выбор шрифта. Еще один бонус (в зависимости от вашей точки зрения) заключается в том, что пользователь не может отправить форму, пока не будут устранены все проблемы с проверкой.

person Jason McElfresh    schedule 24.04.2015
comment
Спасибо за вашу помощь. Тем не менее моя проблема остается: хотя пользователь не может отправить форму до тех пор, пока не будет выбрано значение из раскрывающегося списка автозаполнения - пока пользователь удерживает кнопку мыши нажатой (например, в течение половины секунды), чтобы выбрать значение из автозаполнения, отображается сообщение об ошибке пока пользователь снова не отпустит кнопку мыши. Это раздражает и неприемлемо. Как я могу предотвратить это? Можно ли изменить порядок событий для проверки и выбора/перекраски формы таким образом, чтобы не отображать сообщение об ошибке для этого небольшого промежутка времени? - person tschmid; 26.04.2015
comment
Я полагаю, вы могли бы покопаться в коде Angular и/или Bootstrap и попытаться переопределить, когда происходят события проверки или обновления модели, но в этот момент вы меняете файлы ядра. К сожалению, я не смогу помочь с этим. - person Jason McElfresh; 27.04.2015