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