Question

我正在开发一个Angular应用程序，我有一个表单设置，我需要运行验证。其中一个表单元素是<select>，如下所示：

<select name="noOfPeople" ng-model="noOfPeople">
    <option>No of people*</option>
    <option ng-repeat="amt in [] | range:12">{{ amt +1 }}</option>
</select>

由于设计不允许表单元素上的标签，因此标签基本上是select元素中的第一个选项。我希望此控件无效，除非它符合以下模式：/^[0-9]$/。

我已尝试在ng-pattern上使用<select>，但似乎没有任何效果，Angular始终认为控件有效。

我能想到的另一种方法是在我的控制器中编写一个函数来检查这个控件是否有效，如果不是则阻止表单提交。但是我不想在我干净的控制器中引入随机验证功能。

处理此问题的最佳方法是什么？

Answer 1

您可以在此处使用ng-options属性，而不是ng-repeat，并将空白值归因于您要忽略的任何选项。例如：

<select name="noOfPeople" ng-model="noOfPeople" ng-options="value for value in [] | range:12">
    <option value="">No of people*</option>
    <option value="">This won't count either!</option>
</select>
<p>Selected Value: {{noOfPeople}}<p>

如果您明确要求进行正则表达式检查，则可以编写过滤器并将其添加到ng-options中。

使用AngularJS基于模式验证选择元素

1 个答案: