繁体   English   中英

如何在angularjs中验证元素指令

[英]How to validate element directive in angularjs

我想在angularjs中验证多选。 多选中至少应选择一项。 如果没有,则提交按钮不应启用。 我正在使用require来验证表格。 我可以通过使用require来强制选择名字 ,但是对于multiselect来说也必须这样做

形成

<form ng-submit='addStudent()' name='studentForm' novalidate="">    
    <div class="col-md-4">
    <div class="col-md-12">
        <label for="Name">First Name *</label>
        <input ng-model='student.first_name' name="name" type="text" placeholder="First Name" required class="form-control">
    </div>
   </div>
   <div class="col-md-4">
    <div class="col-md-12">
        <label for="Name">Last Name </label>
        <input ng-model='student.last_name' name="name" type="text" placeholder="Last Name" class="form-control">
       </div>
   </div>                           
   <multi-selection selectedsubjs="student.selectedSubjects"
            allsubjects="allSubjects"
            left-title="All Subjects"
            right-title="Selected Subjects">
   </multi-selection>                              

   <input ng-disabled="sutudentForm.$invalid" type="submit">
</form>

元素指令

app.directive('multiSelection', function(){
          return {
              restrict: 'E',
              scope: {
                  allsubjects: '=',
                  selectedsubjs: '=',
                  displayAttr: '@',
                  leftTitle: '@',
                  rightTitle: '@'
              },
              templateUrl: "templates/multiSelection.html",
              link: function(scope)   {
                  scope.swapsubject1 = function(item)   {
                      var index = scope.allsubjects.indexOf(item);
                      scope.allsubjects.splice(index, 1);
                      scope.selectedsubjs.push(item);
                  }

                  scope.swapsubject2 = function(item)   {
                      var index = scope.selectedsubjs.indexOf(item);
                      scope.selectedsubjs.splice(index, 1);
                      scope.allsubjects.push(item);
                  }
              }
          };
      });

多选模板

  <tr>
    <td>
        <div class="entBox">
            <switchitem ng-repeat="subj in allsubjects" value="subj.name" ng-click="swapsubject1(item)" ng-model="allSubjects"></switchitem>
        </div>
    </td>
    <td>
        <div class="entBox">
            <switchitem ng-repeat="subj in selectedsubjs" value="subj.name" ng-click="swapsubject2(item)" ng-model="student.selectedSubjects"></switchitem>
        </div>
    </td>
</tr>

检查此元素不是输入类型,然后设置

if (!element.isInput()) {
    element[0].setCustomValidity(errorMsg);
}

参考

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM