Пользовательская директива для Обязательно/ngRequired

Question

Я хочу проверить выпадающий список с обязательным. По умолчанию требуется только работа, если значение равно null или пустое (исправьте меня, если я ошибаюсь). Я хочу, чтобы я дал ошибку и сделал неверную форму, если значение равно «не присвоено '.

<select name="first" class="select" title="Select Approver" ng-model="applications.first" ng-options="x.id as x.value for x in list1" ng-change="SetToAll(applications.first,'1')" required></select> 

С помощью этого я могу показать сообщение об ошибке, но это делает форму недопустимый

<span class="error" ng-show="applications.first == 'not assigned'?true:false">Select Approver</span> 

РЕШЕНИЕ: -

1) Если вы хотите использовать требуется затем Проверить Shannon Hochkins решение.

<form name="formName"> 
     <select name="first" class="select" title="Select Approver" ng-model="applications.first" ng-options="x.id as x.value for x in list1" ng-change="SetToAll(applications.first,'1')" required="true"> 
     <option value="">Not Assigned</option> 
     </select> 
     <span class="error" ng-show="formName.first.$invalid ?true:false">Select Approver</span> 
     <pre>{{formName | json}}</pre> 
</form> 

Он добавил опцию с пустым значением <option value="">Not Assigned</option>. и установите required="true" в списке. Это прекрасно работает.

2) Использование пользовательской директивы.

app.directive('req', [ 
     function() { 
      var link = function($scope, $element, $attrs, ctrl) { 
       var validate = function(viewValue) { 
        var comparisonModel = $attrs.req; 
        var invalid = $attrs.invalid; 
        if (viewValue == invalid) { 
         // It's valid because we have nothing to compare against 
         ctrl.$setValidity('req', false); 
        } else { 
         ctrl.$setValidity('req', true); 
        } 
       }; 
       $attrs.$observe('req', function(comparisonModel) { 
        // Whenever the comparison model changes we'll re-validate 
        return validate(ctrl.$viewValue); 
       }); 
      }; 
      return { 
       require: 'ngModel', 
       link: link 
      }; 

     } 
    ]); 

И Ваш HTML код:

<select invalid="not assigned" req={{applications.first}} name="first" class="select" ng-model="applications.first" ng-options="x.id as x.value for x in list1" title="Select Approver" ></select> 
<span class="error" ng-show="Step5.first.$error.req">Select Approver</span> 

Здесь вы должны установить invalid="not assigned" или любое значение, как invalid='0' или invalid=' '. В директиве он сравнивается с недопустимым атрибутом, если значение соответствует ему, будет отображаться ошибка.

Answer 1

Добавить требуемое значение в элемент select, вы можете использовать объект FORM, чтобы проверить, действительно ли это поле.

Вы также можете использовать имя формы, чтобы получить доступ к полям в форме для проверки действительности. Если вы хотите добавить параметр «по умолчанию», в раскрывающийся список вы можете добавить опцию с пустым значением, которое технически недействительно в нужном выпадающем меню. Вы можете скрыть его, если он действителен, поэтому пользователь не может выбрать его снова после того, как выбран правильный вариант.

<form name="formName" ng-controller="testCtrl"> 
    <select name="first" ng-options="x.id as x.value for x in list1" ng-model="applications.first" required> 
     <option value="" ng-hide="formName.first.$valid">Not Assigned</option> 
    </select> 
    <pre>{{formName.first.$invalid | json}}</pre> 
</form> 

Внутри контроллера, настройки некоторых опций:

angular.module('sandbox', []).controller('testCtrl', function($scope) { 

    $scope.list1 = [{ 
    id: 1, 
    value: 'apples' 
    }, { 
    id: 2, 
    value: 'oranges' 
    }]; 
}); 

Демо: https://jsfiddle.net/suunyz3e/304/