应从具有不同ng-model的多个复选框中选择一个复选框

Question

如何验证不同的复选框ng-model？

例如:

我的HTML看起来像:

<form name="myFrm">
  <ul>
      <li><input type="checkbox" ng-model="sunday" />Sunday</li>
      <li><input type="checkbox" ng-model="monday" />Monday</li>
      <li><input type="checkbox" ng-model="tuesday" />Tuesday</li>
      <li><input type="checkbox" ng-model="wednesday" />Wednesday</li>
      <li><input type="checkbox" ng-model="thursday" />Thursday</li>
      <li><input type="checkbox" ng-model="friday" />Friday</li>
      <li><input type="checkbox" ng-model="saturday" />Saturday</li>
  </ul>

  <p ng-if="myFrm.$invalid">Atleast one day should be selected</p>
</form>

从上面的代码,我想检查至少1复选框应该被选中或给出错误信息.

我试过搜索,但我发现其中的解决方案有相同的ng-model,但我ng-model对每个复选框都有所不同.

怎么做？？

DEMO JS FIDDLE

Answer 1

尝试创建自定义指令以进行自定义验证:

//This directive is to update Form validity when any of the elements decorated
// with customRequired is not empty.
app.directive("customRequiredContainer",function(){
  return {
    restrict:"A",
    require:"form",
    controller:function($element,$scope){
      var properties = []; //store the list of properties to check. 

      //customRequired will register the property to be checked.
      this.registerProperty = function(property){
       if (properties.indexOf(property) === -1){
           properties.push(property);

          $scope.$watch(property,function(value){
            if ($element.form){

              //If any of the elements is checked, Form is valid otherwise not valid.
              for (var i=0;i<properties.length;i++){
                if ($scope[properties[i]]){
                  //we should use $setValidity(), 
                  //I don't know why it does not work, check that later.
                  $element.form.$invalid = false;
                  $element.form.$valid = true;
                  return;
                }
              }

              $element.form.$invalid = true;
              $element.form.$valid = false;
            }
          });
        }
      };
    },
    link:function(scope,element,attrs,formController){
      element.form = formController;
    }
  }
});

//This directive is to decorate which element should be checked for validity
app.directive("customRequired",function(){
  return {
    restrict:"A",
    require:"^customRequiredContainer",
    link:function(scope,element,attrs,containerController){
      containerController.registerProperty(attrs.ngModel);
    }
  }
});

HTML:

<form name="myFrm" custom-required-container>
    <ul>
      <li>
        <input type="checkbox" ng-model="sunday" custom-required/>Sunday</li>
      <li>
        <input type="checkbox" ng-model="monday" custom-required/>Monday</li>
      <li>
        <input type="checkbox" ng-model="tuesday" custom-required/>Tuesday</li>
      <li>
        <input type="checkbox" ng-model="wednesday" custom-required/>Wednesday</li>
      <li>
        <input type="checkbox"  ng-model="thursday"  custom-required/>Thursday</li>
      <li>
        <input type="checkbox"  ng-model="friday" custom-required />Friday</li>
      <li>
        <input type="checkbox"  ng-model="saturday" custom-required />Saturday</li>
    </ul>

    <p ng-if="myFrm.$invalid">Atleast one day should be selected</p>
  </form>

DEMO

或这个:

<form name="myFrm">
    <ul>
      <li>
        <input type="checkbox" name="sunday" ng-model="sunday" required/>Sunday</li>
      <li>
        <input type="checkbox" name="monday" ng-model="monday" required />Monday</li>
      <li>
        <input type="checkbox" name="tuesday" ng-model="tuesday" required />Tuesday</li>
      <li>
        <input type="checkbox" name="wednesday" ng-model="wednesday" required />Wednesday</li>
      <li>
        <input type="checkbox" name="thursday" ng-model="thursday" required />Thursday</li>
      <li>
        <input type="checkbox" name="friday" ng-model="friday" required />Friday</li>
      <li>
        <input type="checkbox" name="saturday" ng-model="saturday" required />Saturday</li>
    </ul>

    <p ng-if="myFrm.sunday.$error.required&&myFrm.monday.$error.required
    &&myFrm.tuesday.$error.required&&myFrm.wednesday.$error.required
    &&myFrm.thursday.$error.required&&myFrm.friday.$error.required
    &&myFrm.saturday.$error.required">Atleast one day should be selected</p>
 </form>

DEMO

说明:

通过给出输入名称:name="sunday",angular将输入名称添加为表单的属性:myFrm.sunday.从那时起,我们可以检查是否使用其$error.required属性选择了输入.

或这个:

<form name="myFrm">
    <ul>
      <li>
        <input type="checkbox" ng-model="sunday" />Sunday</li>
      <li>
        <input type="checkbox" ng-model="monday" />Monday</li>
      <li>
        <input type="checkbox" ng-model="tuesday" />Tuesday</li>
      <li>
        <input type="checkbox" ng-model="wednesday" />Wednesday</li>
      <li>
        <input type="checkbox"  ng-model="thursday"  />Thursday</li>
      <li>
        <input type="checkbox"  ng-model="friday"  />Friday</li>
      <li>
        <input type="checkbox"  ng-model="saturday"  />Saturday</li>
    </ul>

    <p ng-if="!sunday&&!monday&&!tuesday&&!wednesday&&
    !thursday&&!friday&&!saturday">Atleast one day should be selected</p>
  </form>

DEMO