angularjs – 选择后的Angular typeahead验证

2023年7月20日 213次阅读

我使用角度(版本1.3.9)和角度ui / typeahead从
http://angular-ui.github.io/bootstrap/(版本0.12.0).

在我的Web应用程序中,用户应该被迫选择typeahead / autocomplete下拉列表提供的选项之一,因此我设置< input typeahead =“…”typeahead-editable =“false”… />.

问题是,当用户单击鼠标按钮并按住它时,验证已经启动,但模型尚未使用所选选项进行更新.用户释放鼠标按钮时会触发选择.
因此,在单击和释放鼠标按钮之间的时间范围内,元素的状态变为无效,因此会显示相应的错误消息.

此时间范围通常小于一秒(取决于用户释放鼠标按钮的速度).但如果在这么短的时间内出现错误,那么用户体验仍然非常糟糕.

我可以更改相应指令的执行顺序吗？
例如.应该在ng-blur之前调用ng-select？

您知道哪些选项可以解决问题？

您可以在http://co2offset.atmosfair.de/flight/offset上测试该行为
只需键入机场,从下拉列表中选择一个选项并按住鼠标按钮.然后,您会看到您不应该看到的红色错误消息.

最佳答案 我最近遇到了同样的问题.我最终禁用了提交按钮,直到选择了一个值.所以我的表单看起来像这样：

   <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”是关键.它似乎运行良好,足以阻止用户超越预先选择.另一个奖励(取决于您的观点)是,在修复所有验证问题之前,用户无法提交表单.

点赞