如何使用 Angular 实现复选框组所需的验证？

Question

我有一个带有复选框输入的 html 模板，并且在组中至少选择了其中一个以通过所需的验证。

HTML:

<input class="cb" type="checkbox" value="1" ng-model="form.cb.one"
        ng-required="showRequired" ng-change="handleClick()">one</input>
<input class="cb" type="checkbox" value="2" ng-model="form.cb.two"
       ng-required="showRequired" ng-change="handleClick()">two</input>...

JS:

$scope.showRequired=true;
$scope.form.cb = {one:false, two:true, three:false}
$scope.handleChange = function(){
$scope.showRequired = !($scope.chkCollection.one || $scope.chkCollection.two || $scope.chkCollection.three);
};

我打算更改 ng-required 属性以在单击复选框时进行验证，但由于它是一个模板，它可能与页面上其他地方使用的变量名称（$scope.showRequired）相同，这可能会影响其他必填字段。如何解决这个问题呢？谢谢

Answer 1

是否需要检查 form.cb 组之一？ 如果您需要进行更多验证，可以在 showRequired 行之后执行此操作，其中考虑到 showRequired：

<input class="cb" type="checkbox" value="1" ng-model="form.cb.one"
    ng-required="showRequiredCheckbox()" ng-change="handleClick()">one</input>
<input class="cb" type="checkbox" value="2" ng-model="form.cb.two"
   ng-required="showRequiredCheckbox()" ng-change="handleClick()">two</input>...

还有js：

$scope.showRequired = !($scope.chkCollection.one || $scope.chkCollection.two || $scope.chkCollection.three);
function showRequiredCheckbox(){ 
    return $scope.showRequired && !($scope.form.cb.one 
            || $scope.form.cb.two|| $scope.form.cb.three);
}