4

我正在使用来自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 || 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>

提前致谢

4

4 回答 4

9

我只是使用了具有相同输出模型的不可见输入字段。并将其设置为显示：无。

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

但请注意名称 - 只需从多选中删除名称属性并将其添加到隐藏的输入字段中。

于 2015-02-19T10:44:35.923 回答
3

扩展 ilmgb 答案：

如果您还想在验证错误控件中添加验证类

<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"
  class="resultDataSelect"
  >


<input type="text" ng-model="resultData" name="days" style="display:none" required />
<div ng-show="myForm.days.$error.required" class="validation-error">Days are required</div>

在您的控制器中添加此手表以在输出模型更改时附加该类：

$scope.$watch(function (scope) { return $scope.resultData },
           function (newValue, oldValue) {

               if (newValue.length <= 0) {
                   $(".resultDataSelect").find(".multiSelectButton").addClass("ng-invalid");
               } else {
                   $(".resultDataSelect").find(".multiSelectButton").removeClass("ng-invalid");
               }
           });
于 2015-03-27T20:53:33.943 回答
0

有了这个：output-model="resultData"您将从多选中获取所选项目的列表。

鉴于：

$scope.resultData = [];

$scope.validation = function () {
	if($scope.resultData === null || $scope.resultData == ''){
    	false //not validated
    }else {
    	true //validated
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<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>
<button ng-click="validation()">submit</button>

只需检查输出列表是否为空。

希望对您有所帮助，如果有帮助，请检查答案。祝你好运！;)

于 2014-09-18T13:36:40.383 回答
0

This accepted answer did not work for me.. Replace the required model w/ the length of the required model if its an array.

This should work for anyone using an array.

   <div ng-dropdown-multiselect options="ctrl.list" selected-model="ctrl.item"></div>
   <input type="hidden" ng-model="ctrl.item[0]" ng-required="true">
于 2020-08-26T20:05:37.623 回答