< select>上的AngularJS验证带有提示选项 [英] AngularJS Validation on <select> with a prompt option

问题描述

对于Bootstrap中样式化的选择下拉输入，我具有以下代码.

I have the following code for a select drop down input that is styled in Bootstrap.

<select class="form-control" name="businessprocess" ng-model="businessprocess" required>
    <option value="">-- Select Business Process --</option>
    <option value="C">Process C</option>
    <option value="Q">Process Q</option>
</select>

用户必须先选择业务流程，然后才能提交此表单.

Before the user is able to submit this form, he or she must select a business process.

所以我将required指令放在了select语句上，但是因为第一个选项标签的-- Select Business Process --仍然算作一个选择的选项，因此满足了必需的标志，因此即使没有选择实际的业务流程.

So I have put the required directive on the select statement, however because the first option tag has -- Select Business Process -- that still counts as a selected option, and thus the required flag is met, and therefore the form validates even though no actual Business Process is selected.

我该如何克服这个问题?

How can I overcome this issue?

谢谢.

推荐答案

此方法可以/应该解决您的问题:

This approach could/should solve your issue:

1)在范围内声明选项:

1) declare the options inside of your scope:

$scope.processes = [
    { code: "C", name: "Process C" },
    { code: "Q", name: "Process Q" }
];

然后2)使用此声明:

<select class="form-control" name="businessprocess" ng-model="businessprocess" required
    ng-options="c.code as c.name for c in processes" >
    <option value="">-- Select Business Process --</option>
</select>

此处的技巧实际上是，在角度循环期间，将首先解决当前值不在processes选项中的问题.因此，默认值将设置为:

The trick here is in fact, that during the angular cycles, will firstly fix the issue that the the current value is not among the processes options. So, the default would be set to:

<option value="">-- Select Business Process --</option>

和required将按预期运行(更多详细信息)

and required will be working as expected (more details)

这篇关于< select>上的AngularJS验证带有提示选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！