Меньшая работа вокруг ng-pattern on Select

Question

Я работаю над угловым приложением, и мне нужно было поместить шаблонную проверку на элемент выбора. Просто использование ng-pattern при выборе не работает. Поэтому я создал скрытый ввод с той же моделью с ng-образцом на скрытом входе, который тоже не работал. Поэтому я создал текстовый ввод с ng-образцом и спрятал его через 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

Вы не должны использовать ng-pattern со скрытым input поля для этого случая, вы должны добавить значение для каждого варианта & то вы должны иметь required атрибут убедитесь, что какой-либо из опции следует выбран перед отправкой. Добавление name="price" добавит элемент формы к объекту myForm.

Markup

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

Update

Если вы хотите сделать это с помощью 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

Вы можете также просто отключить c ertain варианты, если вы не хотите, чтобы это было возможно, чтобы выбрать их в первую очередь:

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

Answer 3

Chiming здесь, как это то, что приходит время, и снова, и предлагаемые решения здесь не работают для меня. Это очень распространенный случай использования.

Я попытался положить пустую опцию, и это не сработало для меня. Я заметил, что AngularJS размещал атрибут value с тем же значением, что и содержимое тега <option>. Выбор был ng-valid даже при выборе этой опции.

В моем случае я поместил вариант заполнителя т.е. ВЫБРАТЬ центр в качестве первого элемента в списке мест (переменной области действия я связать параметры в). Я скрываю первый элемент с условным CSS, но сначала выбираю его, устанавливая dc.user.CentreName до ВЫБЕРИТЕ ЦЕНТР в контроллере. Это дает нам поведение, которое оно исчезает, когда пользователь нажал любую другую опцию. Другой вариант - отключить его, что означает, что он все равно будет отображаться в верхней части списка, но будет недоступен после выбора другого элемента (был добавлен в Angular 1.4x). Я также поместил этот код в (ng-disabled), чтобы проиллюстрировать это. Вы можете безопасно удалить его, если хотите пойти по скрытому маршруту.

Далее мы хотим использовать стандартную проверку угловых форм, чтобы убедиться, что выбран какой-то элемент, отличный от первого. Я попробовал другие предлагаемые способы ввода пустой опции (без значения) и установки, необходимой для выбора. Поэтому я пошел на скрытый элемент входной формы с требуемым атрибутом и ng-образцом, используя отрицательное утверждение lookahead.

Обратите внимание, что мы используем ng-класс для привязки ng-valid и ng-invalid к выбору, поэтому существующий стиль 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/> 

И в контроллере ... (обратите внимание, вы можете также использовать нг-инициализацию для установки значения замещающего декларативно с точки зрения см 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); 
}