ng-Required for Checkbox

Question

I have an array of checkbox controls added in index.html. I want to check if atleast one checkbox is checked when the user clicks on submit button. I tried the below code, but it does not seem to work.

In index.html:

    <form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate="">  
      <div >
                          <label>Delivery Method</label>
                      </div>
                      <div ng-repeat="method in deliveryMethods">
                          <input type="checkbox" id="{{method.id}}"
                                 value="{{method.value}}" name="deliveryMethod[]" ng-model="method.selected"
                                 ng-click="toggleSelection(method.value)" ng-required="!someSelected">
                          {{method.value}}

                      </div>

                  </div>
                  <span style="color:red" ng-show="submitted == true &&  !someSelected">Delivery is required</span>         
<input type="submit" value="Submit" ng-click="submitted=true" />

In the controller.js file,

$scope.deliveryMethods = [{
            "id": 1,
            "value": "Test-up",
            selected: true
        }, {
            "id": 2,
            "value": "Test Two",

            selected: false
        }, {
            "id": 3,
            "value": "Test Three",

            selected: false
        }];      

 $scope.toggleSelection = function toggleSelection(deliveryMethods) {       
        var idx = $scope.deliverySelection.indexOf(deliveryMethods);
                    if (idx > -1) {
            $scope.deliverySelection.splice(idx, 1);
        } else {
            $scope.deliverySelection.push(deliveryMethods);
        }
        someSelected();
    };
$scope.someSelected = true;
    function someSelected() {
        $scope.someSelected = false;
        for (var i = 0; i < $scope.deliveryMethods.lenght; i++) {
            if ($scope.deliveryMethods[i].selected == true) {
                $scope.someSelected = true;                   
                return false;
            }
        }
    }

I would like to check, if atleast one checkbox is checked, when user clicks on submit button. If no checkbox is selected, then show a span with custom message. How to fix this? Thanks

Ramesh Rajendran · Accepted Answer · 2017-01-04T10:29:03.617

1

try calculateSomeSelected with loop

$scope.someSelected=false;
for (var i=0;i<$scope.deliveryMethods.lenght;i++)
{
   if($scope.deliveryMethods[i].selected == true)
   {
      $scope.someSelected=true;
      // show custom message here
      return false;
   }
}

Update

but there is no error message getting shown. How to update the error message as below for checkbox to show the error

update your span code like as below

<span style="color:red" ng-show="submitted == true && !someSelected">Name is required</span>

and also please call your someSelected() on initial stage and every checkbox click event.

edited Jan 04 '17 at 10:29

answered Jan 04 '17 at 07:52

Ramesh Rajendran

37,412
45
153
234

Hi.. I updated the code as per your code, but there is no error message getting shown. How to update the error message as below for checkbox to show the error. I have done the below for a textbox, is it possible to do the same for checkbox: Name is required – venkat14 Jan 04 '17 at 08:25
when the page is loaded initially,one checkbox is selected by default. when i click submit button at that time, i am still getting the error message. To handle the initial submit button check, what should be done. The method someSelected is only called on the check change event. – venkat14 Jan 04 '17 at 10:09
call `someSelected()` in the initial stage. then it will check that – Ramesh Rajendran Jan 04 '17 at 10:13
That worked. Could you please update the spelling of length in the code. I will update your solution as answer – venkat14 Jan 04 '17 at 10:26
1

I have updated the initial code with the final solution. Hope it can help others as well. Thanks – venkat14 Jan 04 '17 at 10:31

Mahbub Moon · Answer 2 · 2017-01-04T09:28:58.040

0

You can use ng-disabled or ng-if on the submit button as a workaround and use a flag for that. Here is a Working Fiddle.

edited Jan 04 '17 at 09:28

answered Jan 04 '17 at 09:14

Mahbub Moon

491
2
8

ng-Required for Checkbox

2 Answers2

Update