必需/ngRequired 的自定义指令

Question

我想用 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) 如果您想使用必需，请检查 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

将所需的值添加到选择元素，然后您可以使用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/