我正在使用来自 http://angular-ui.github.io/bootstrap/ 的 angular(版本 1.3.9)和 angular-ui/typeahead (版本 0.12.0)。
在我的网络应用程序中,用户应该被迫选择预先输入/自动完成下拉菜单提供的选项之一,所以我设置了 <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"是关键。它似乎工作得很好,可以防止用户提前选择。另一个好处(取决于您的观点)是用户无法提交表单,直到所有验证问题都得到解决。
关于angularjs - 选择后的 Angular typeahead 验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28033503/