Làm cách nào để yêu cầu ít nhất 1 hộp kiểm cho Xác thực Biểu mẫu AngularJS?

Question

Tôi có một mảng đối tượng JSON được hiển thị trong biểu mẫu. Tôi muốn có công việc xác nhận biểu mẫu nơi người dùng phải chọn ít nhất một hộp kiểm cho toàn bộ biểu mẫu hợp lệ.

Tôi biết rằng ng-required có thể được sử dụng nhưng với việc triển khai tôi có, điều đó có nghĩa là tất cả chúng phải được chọn để hợp lệ.

Dưới đây là đoạn code tôi có cho đến nay:

index.html:

<div ng-repeat="item in volunteerOptions"> 
    <label class="checkbox"><input type="checkbox" value="" data-ng-model="item.selected" ng-required="true">{{ item.content }}</label> 
</div> 

<button type="submit" class="btn btn-success" ng-disabled="!memberRegistrationForm.$valid">Submit</button> 

controller.js

$scope.volunteerOptions = [ 
     { content : 'Content 1', selected : false }, 
     { content : 'Content 2', selected : false }, 
     { content : 'Content 3', selected : false }, 
     { content : 'Content 4', selected : false }, 
]; 

Bất kỳ ý tưởng về làm thế nào tôi sẽ có thể để đạt được hành vi này?

Answer 1

Bạn có thể thêm thuộc tính phạm vi khác và sử dụng array.some để kiểm tra xem có bất kỳ số selected nào là true hay không. Sau đó, cấp thuộc tính phạm vi đó cho ng-required. Một cái gì đó như

$scope.isOptionsRequired = function(){ 
    return !$scope.volunteerOptions.some(function(options){ 
    return options.selected; 
    }); 
} 

<input type="checkbox" value="" data-ng-model="item.selected" ng-required="isOptionsRequired()">