如何验证角度多选?
[英] How can i validate angular-multi-select?
本文介绍了如何验证角度多选?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<块引用>
我正在使用来自 http://isteven.github.io/的 angular-multi-select角度多选/ .它根据我的需要工作.我正在以模态形式使用多选，我想验证它，但是当我使用必需的选项时它没有验证.谁能建议我如何在表单中验证 angular-multi-select.
代码
<div class="form-group" ng-class="{'has-error' :batch_form.end_time.required || batch_form.start_time.required || batch_form.days.$invalid && (!batch_form.days.$pristine || 已提交) }"><label for="">时间</label><div ng-repeat="batch_timing in batch_timings" ><div class="row" ng-hide="batch_timing._destroy == 1"><div class="col-md-10"><div class="row new-timings"><div class="col-md-1"><span class="text-style pull-left">天</span> <div class="timings-row" ><div class="col-md-11">{{batch_form.start_time.$error.required}}
<div class="row col-md-offset-1 new-timings"><div class="col-md-1"><span class="text-style">来自</span>
<div class="col-md-4"><选择类=形式控制"data-ng-model="batch_timing.start_time"ng-options="timing astiming fortiming intimings"必填名称=开始时间"></选择>
<div class="col-md-1"><span class="text-style">到</span>
<div class="col-md-4"><select class="form-control"data-ng-model="batch_timing.end_time"ng-options="timing astiming fortiming intimings"必填名称="end_time"></选择>
<div class="col-md-2"><span class="delete-button"><a ng-hide="batches.single.id" class="btn btn-danger" data-ng-model="batch_timing.id" href ng-click="batch_timings.splice($index, 1)" ><i class="glyphicon glyphicon-trash"></i></a><a ng-show="batches.single.id" class="btn btn-danger" data-ng-model="batch_timing.id" href ng-click="remove(batch_timing.id, batch_timings)" ><i class="glyphicon glyphicon-trash"></i></a></span>
<div class="help-block col-lg-12 col-md-12 col-sm-12" ng-show="batch_form.days.$error.required && (!batch_form.start_date.$pristine|| 提交)">需要开始时间和结束时间.
<div class="help-block error" ng-show="batch_form.start_time.$error.required &&batch_form.end_time.$error.required && (!batch_form.start_date.$pristine ||提交)">需要开始时间和结束时间.
<div class="row"><div class="col-md-12"><a class="btn btn-primary" href ng-click="newTiming($event)"><i class="glyphicon glyphicon-plus"></i></a>
提前致谢
解决方案
我只是使用了一个具有相同输出模型的不可见输入字段.并将其设置为显示:无.
{{batch_form.start_time.$error.required}}<div 多选输入模型=batch_timing.days"输出模型=结果数据"按钮标签=首字母缩略词"item-label="缩写符号名称"滴答属性=打勾"helper-elements="all none reset">
但要注意名称 - 只需从多选中删除名称属性并将其添加到隐藏的输入字段中即可.
I am using angular-multi-select from http://isteven.github.io/angular-multi-select/ . It works according to my need. I am using multi-select in modal form and i want to validate it but it is not validating when i use required option. Can anyone suggest me how to validate angular-multi-select in form.
code
<div class="form-group" ng-class="{'has-error' :batch_form.end_time.required || batch_form.start_time.required || batch_form.days.$invalid && (!batch_form.days.$pristine || submitted) }">
<label for="">Timings</label>
<div ng-repeat="batch_timing in batch_timings" >
<div class="row" ng-hide="batch_timing._destroy == 1">
<div class="col-md-10">
<div class="row new-timings">
<div class="col-md-1">
<span class="text-style pull-left">Days</span>
</div>
<div class="timings-row" >
<div class="col-md-11">
{{batch_form.start_time.$error.required}}
<div
multi-select
input-model="batch_timing.days"
output-model="resultData"
button-label="acronym"
item-label="acronym symbol name"
tick-property="ticked"
helper-elements="all none reset"
required name="days">
</div>
</div>
</div>
</div>
<div class="row col-md-offset-1 new-timings">
<div class="col-md-1">
<span class="text-style">from</span>
</div>
<div class="col-md-4">
<select
class="form-control"
data-ng-model="batch_timing.start_time"
ng-options="timing as timing for timing in timings"
required name="start_time">
</select>
</div>
<div class="col-md-1">
<span class="text-style">to</span>
</div>
<div class="col-md-4">
<select class="form-control"
data-ng-model="batch_timing.end_time"
ng-options="timing as timing for timing in timings"
required name="end_time">
</select>
</div>
</div>
</div>
<div class="col-md-2">
<span class="delete-button">
<a ng-hide="batches.single.id" class="btn btn-danger" data-ng-model="batch_timing.id" href ng-click="batch_timings.splice($index, 1)" ><i class="glyphicon glyphicon-trash"></i></a>
<a ng-show="batches.single.id" class="btn btn-danger" data-ng-model="batch_timing.id" href ng-click="remove(batch_timing.id, batch_timings)" ><i class="glyphicon glyphicon-trash"></i></a>
</span>
</div>
</div>
</div>
<div class="help-block col-lg-12 col-md-12 col-sm-12" ng-show="batch_form.days.$error.required && (!batch_form.start_date.$pristine || submitted)"> Start time and end time are required.
</div>
<div class="help-block error" ng-show="batch_form.start_time.$error.required && batch_form.end_time.$error.required && (!batch_form.start_date.$pristine || submitted)"> Start time and end time are required.
</div>
<div class="row">
<div class="col-md-12">
<a class="btn btn-primary" href ng-click="newTiming($event)"><i class="glyphicon glyphicon-plus"></i></a>
</div>
</div>
</div>
Thanks in advance
解决方案
I just used an invisible input field with the same output model. And set it to display: none.
<div class="col-md-11">
{{batch_form.start_time.$error.required}}
<div multi-select
input-model="batch_timing.days"
output-model="resultData"
button-label="acronym"
item-label="acronym symbol name"
tick-property="ticked"
helper-elements="all none reset">
</div>
<input type="text" ng-model="resultData" name="days" style="display:none" required />
But be careful with the name - just remove the name attribute from the multi-select and add it to your hidden input field.
这篇关于如何验证角度多选?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
