Required/ngRequired 的自定义指令

Question

我想用必填项验证下拉列表。 Default required 仅在值为 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) 如果您想使用 required 然后检查 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>。并在 select 中设置 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对象来检查该字段是否有效。

您还可以使用表单名称访问表单中的字段以检查有效性。如果要向下拉列表添加 'default' 选项，您可以添加一个空值的选项，这在技术上对所需的下拉菜单无效。如果它有效，您可以选择隐藏它，这样用户在选择了正确的选项后就无法再次选择它。

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

Required/ngRequired 的自定义指令

Custom Directive for Required/ngRequired

html

angularjs

ng-required