1

我正在开发一个角度应用程序，我需要在选择元素上进行模式验证。仅在 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>

4

3 回答 3

1

在这种情况下，您不应该使用ng-pattern隐藏input字段，您应该为每个选项添加值，然后您应该有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);

演示在这里

于 2015-08-20T20:27:13.157 回答
1

如果您不希望一开始就选择它们，您也可以禁用某些选项：

  <select ng-model="price">
    <option disabled>Please Select</option>
    <option>TEST1</option>
    <option>TEST2</option>
  </select>
于 2015-08-20T20:31:17.150 回答
0

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

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

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

接下来我们要使用标准的 Angular 表单验证来确保选择第一个以外的其他项目。我尝试了其他建议的方法，即放入一个空选项（没有值）并在选择上进行设置。所以我选择了一个隐藏的输入表单元素，该元素具有必需的和 ng-pattern 属性，使用否定的前瞻断言。

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

感觉有点hacky，但它有效。

<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 从视图中以声明方式设置占位符值，请参阅https://stackoverflow.com/a/13775151/4707368）

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);
}
于 2016-04-14T09:16:09.530 回答