Угловой тип проверки после выбора

Question

Я использую угловой (версия 1.3.9) и угловой-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 Просто введите аэропорт, выберите нужный вариант из выпадающего списка и нажмите кнопку мыши. Затем вы увидите красное сообщение об ошибке, которое вы не увидите.

Answer 1

У меня была такая же проблема совсем недавно. Я закончил отключать кнопку отправки до тех пор, пока не будет выбрано значение. Так что моя форма выглядит следующим образом: "searchForm $ недействителен"

<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>

нг отключенной = ключ. Кажется, он работает достаточно хорошо, чтобы пользователи не опережали выбор типа. Другой бонус (в зависимости от вашей перспективы) заключается в том, что пользователь не может отправить форму до тех пор, пока все проблемы проверки не будут исправлены.