使用提示选项对<select>进行AngularJS验证

Question

我有以下代码用于在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>

在用户能够提交此表单之前,他或她必须选择业务流程.

所以我已将required指令放在select语句中,但是因为第一个选项标记-- Select Business Process --仍然被视为选定选项,因此满足了所需的标志,因此即使没有选择实际的业务流程,表单也会生效.

我怎样才能克服这个问题？

谢谢.

Answer 1

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

1)声明范围内的选项:

$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选项中的问题.因此,默认设置为:

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

并将required按预期工作(更多细节)