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

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

1 个答案: