Question

我正在开发一个角度应用程序，我需要在select元素上进行模式验证。只是在选择上使用ng-pattern没有用。所以我创建了一个隐藏的输入，在隐藏的输入上使用相同的模型和ng-pattern，这也没有用。所以我创建了一个带有ng-pattern的文本输入并通过css隐藏它。哪个效果很好。

这方面有一个较小的工作吗？

EDIT1：我想我应该补充一点，这些选项是由ng-options

生成的

EDIT2 ：相应地修改了代码段，以显示我真正想要的内容。

＆＃13;

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

＆＃13;

.show-none {
    display:none;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

<强>代码

ExtJs

Demo here

Answer 2

如果您不希望首先选择它们，也可以禁用某些选项：

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

Answer 3

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

我尝试了一个空选项，但它对我没用。我注意到AngularJS正在放置一个value属性，其值与<option>标记的内容相同。即使选择了此选项，选择也是ng-valid。

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

接下来，我们要使用标准的Angular表单验证来确保选择除第一个之外的某个项目。我尝试了其他建议的方法来放入一个空选项（没有值）并在select上设置required。所以我使用负前瞻断言去了一个带有必需和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);
}

更小的解决方案选择ng-pattern

3 个答案: