【问题标题】:How to validate element directive in angularjs如何在angularjs中验证元素指令
【发布时间】:2016-02-03 02:32:44
【问题描述】:

我想在 angularjs 中验证多选。在多选中至少应选择一项。如果没有,则不应启用提交按钮。我正在使用 require 来验证表单。我可以使用require强制选择名字,但如何强制选择多选

表格

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

【问题讨论】:

    标签: javascript angularjs


    【解决方案1】:

    检查这个元素不是输入类型然后设置

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

    reference

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2016-11-28
      • 2013-09-26
      • 1970-01-01
      • 1970-01-01
      • 2015-06-06
      • 2014-08-28
      • 2014-06-11
      • 1970-01-01
      相关资源
      最近更新 更多