javascript - Select 上的 ng-pattern 变小

Question

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