Select 上的 ng-pattern 变小

Question

我正在开发 angular 应用程序，我需要对 select 元素进行模式验证。仅在 select 上使用 ng-pattern 是行不通的。所以我在隐藏输入上创建了一个具有相同模型和 ng-pattern 的隐藏输入，但这也不起作用。所以我用 ng-pattern 创建了一个文本输入，并通过 css 隐藏了它。效果很好。

是否有更小的解决方法？

EDIT1: 我想我应该补充说选项是由 ng-options

生成的

EDIT2: 相应地编辑了代码片段以显示我真正想要的内容。

function formCtrl($scope) {
  $scope.options = ['Please Select','Value 1','Value 2'];
  $scope.price = 'Please Select';
    $scope.onSubmit = function (form) {
        console.log(form.$valid);
    }
}

.show-none {
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="formCtrl">
    <form name="myForm" ng-submit="onSubmit(myForm)">
        <select ng-model="price" ng-options="o as o for o in options"></select>
        <input type="text" class="show-none" ng-pattern="/^(?!.*(Please Select))/" ng-model="price" name="price_field"> <span ng-show="myForm.price_field.$error.pattern">Not a valid option!</span>

        <input type="submit" value="submit" />
    </form>
</div>

Answer 1

对于这种情况，您不应该使用带有隐藏 input 字段的 ng-pattern，您应该为每个选项添加值，然后您应该具有 required 属性以确保任何该选项应在提交前选择。添加 name="price" 会将表单元素添加到 myForm 对象。

标记

<select ng-model="price" name="price" required>
     <option>Please Select</option>
     <option value="TEST1">TEST1</option>
     <option value="TEST2">TEST2</option>
</select>

更新

如果您想使用 ng-options 制作它，那么它将类似于下面的内容。您不需要在数组中添加 Please Select，您可以在 select

中手动添加它

标记

<form name="myForm" ng-submit="onSubmit(myForm)" novalidate>
  <select ng-model="price" ng-options="o for o in options" required>
    <option value="">Please select a person</option>
  </select>

  <input type="submit" value="submit" />
</form>

代码

(function(angular) {
  'use strict';
  angular.module('staticSelect', [])
    .controller('formCtrl', ['$scope', function formCtrl($scope) {
      $scope.options = ['Value 1', 'Value 2'];

      $scope.onSubmit = function(form) {
        console.log(form.$valid);
      }
    }]);
})(window.angular);

Demo here

Answer 2

如果您不想首先 select 某些选项，您也可以只禁用它们：

  <select ng-model="price">
    <option disabled>Please Select</option>
    <option>TEST1</option>
    <option>TEST2</option>
  </select>

Answer 3

在这里插话，因为这是一次又一次出现的问题，这里建议的解决方案对我不起作用。这也是一个非常常见的用例。

我试着输入一个空选项，但它对我不起作用。我注意到 AngularJS 放置了一个 value 属性，其值与 <option> 标签的内容相同。即使使用此选项 selected，select 也是 ng-valid。

在我的场景中，我放置了占位符选项，即 SELECT A CENTRE 作为 locations[=36= 列表中的第一项]（我将选项绑定到的范围变量）。我用条件 CSS 隐藏了第一个项目，但是 select 它最初是通过将 dc.user.CentreName 设置为 SELECT A CENTRE 在控制器中。这给了我们当用户点击任何其他选项时它消失的行为。另一种选择是禁用它，这意味着它仍将显示在列表的顶部，但在 select 另一个项目（在 Angular 1.4x 中添加）后将无法 select。我还将该代码放入（ng-disabled 属性）来说明这一点。如果你想走隐藏路线，你可以安全地删除它。

接下来我们要使用标准 Angular 表单验证来确保 select 编辑除第一个以外的某些项目。我尝试了其他建议的方法，即放入一个空选项（没有值）并在 select 上进行必要的设置。因此，我使用否定先行断言寻找具有 required 和 ng-pattern 属性的隐藏输入表单元素。

请注意，我们使用 ng-class 将 ng-valid 和 ng-invalid 绑定到 select，因此现有的 CSS 样式将起作用。

感觉有点老套，但确实有效。

<select ng-model="dc.user.CentreName" ng-class="{'ng-valid': orderForm.centreName.$valid, 'ng-invalid': !orderForm.centreName.$valid }"> <option ng-repeat="location in locations" ng-disabled="$index < 1" ng-style="$index < 1 && {'display': 'none'} " value="{{location}}"> {{location}} </option> </select> <input type="hidden" ng-model="dc.user.CentreName" ng-pattern="/^(?!SELECT)/" required/>

并且在控制器中...（请注意，您还可以使用 ng-init 从视图中以声明方式设置占位符值，请参阅）

function ShoppingController($scope [...]) { [...] $scope.dc = { user: { "CentreName": 'SELECT A CENTRE', [...]

您的 CSS 可能如下所示：

input.ng-touched.ng-invalid, select.ng-invalid { background-color: rgba(199, 35, 35, 0.15); } input.ng-touched.ng-valid, select.ng-valid { background-color: rgba(116, 173, 39, 0.16); }

Select 上的 ng-pattern 变小

Smaller Work around for ng-pattern on Select

javascript

html-select

angularjs

angularjs-ng-options

angularjs-ng-pattern