Question

我有2个像这样使用的复选框

 <div class="group">
                        <label>Message to:</label>
                        <span class="checkbox-group">
                            <input type="checkbox"   name="mobile" ng-model="formData.mobile" />
                            <label for="mobile">Mobile</label>

                        </span>
                        <span class="checkbox-group">
                            <input type="checkbox"    name="email" ng-model="formData.email" />
                            <label for="email">Email</label>

                        </span>
                    </div>

如果未选中其中一个复选框，我想显示错误消息。我想在按下提交按钮后才显示错误消息。我怎么能这样做？

Answer 1

您可以通过这种方式创建指令并使用它

app.directive('checkRequired', function(){
  return {
    require: 'ngModel',
    restrict: 'A',
    link: function (scope, element, attrs, ngModel) {
      ngModel.$validators.checkRequired = function (modelValue, viewValue) {
        var value = modelValue || viewValue;
        var match = scope.$eval(attrs.ngTrueValue) || true;
        return value && match === value;
      };
    }
  }; 
});

或的更新：使用必需属性

<div class="group"> <label>Message to:</label> <span class="checkbox-group"> <input type="checkbox" name="mobile" ng-model="formData.mobile" /> <label for="mobile">Mobile</label> </span> <span class="checkbox-group"> <input type="checkbox" name="email" ng-model="formData.email" /> <label for="email">Email</label> </span> </div> <div ng-show="!isCheckboxChecked() && buttonClicked">Please select the Checkbox before submit</div>

//你的按钮在这里

您应该在 表单提交 中调用的函数中将一些随机变量名称设置为true。像

$scope.buttonClicked = true;

OR：更新：

$scope.isCheckboxChecked = function() { return ($scope.formData.mobile|| $scope.formData.email);

}

Answer 2

使用可以使用下面给出的表单和按钮。所以在提交时，我正在触发validate（）函数。

<div data-ng-controller="myController">
    <form data-ng-submit="validate()">

                <label>Message to:</label>
                <span class="checkbox-group">
                <input type="checkbox" name="mobile" data-ng-model="formData.mobile" />
                 <label for="mobile">Mobile</label>
                 </span>
                 <span class="checkbox-group">
                 <input type="checkbox"    name="email" data-ng-model="formData.email" />
                 <label for="email">Email</label>
                 </span>

        <input type="submit" value="Submit" />
    </form>
</div>

你的控制器：

function myController( $scope ){
    $scope.formData = {
        mobile : false, //initialize them to false, since by default they are undefined
        email : false       
    }
    $scope.validate = function(){
        if($scope.formData.mobile == false || $scope.formData.email == false)
        {
            alert('You\'ve not checked \'em all!')
        }
        else{
            alert('You\'ve checked \'em all!')
        }
    }
}

请找到working example here

angularjs复选框验证

2 个答案: