如何在 angularjs 中验证元素指令
How to validate element directive in angularjs
我想在angularjs中验证多选。在多选中应至少选择一个项目。如果没有,则不应启用提交按钮。我正在使用要求来验证表单。我能够通过使用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>
检查此元素不是输入类型,然后设置
if (!element.isInput()) {
element[0].setCustomValidity(errorMsg);
}
参考
相关文章:
- 从所有元素中删除HTML5验证
- 在验证器中添加自定义规则以检查<ul>具有元素
- 使用jquery验证函数不适用于select元素
- validate.js验证数组元素
- 如何在JavaScript而不是HTML元素中设置AngularJS验证
- 使用webdriver和selenium验证元素是否不存在
- 如何对未知表单元素进行表单验证
- 验证元素值和复选框的Javascript
- 使用html 5对元素执行自定义表单验证功能
- Javascript:表单验证getElementById仅返回第一个id元素
- 表单元素值更改后的角度 JS 验证
- 如何在 angularjs 中验证元素指令
- 在验证元素是否存在时如何考虑 ng-if
- jQuery验证-元素未定义
- 如何使用javascript和localStorage验证元素是否存在于html中
- 在AngularJS动态电子邮件验证元素中,当我填写电子邮件检查元素时,它's重置
- 在添加到html页面之前验证元素是否存在
- 根据索引验证元素是否存在
- 在AngularJS中使用ng-disabled来验证元素集合时,会出现$rootScope:infdig错误
- 如何使用jquery验证元素列表