AngularJS Validating group of radio buttons and checkboxes in a form

Question

I am trying to validate 2 sets of radio buttons and a set of checkboxes in a form. At least one item should be selected from each set before submitting form. I did like shown below but the button is not getting enabled when I select one from each set.

I also tried setting using "required" for the inputs and like "required != radioM" for the different sets , but nothing worked. Seems simple, but what I am doing wrong.

<form class="form-inline" name="myForm">
   <div class="form-group"> 
   <label class="radio-inline" >
   <input name="sampleinlineradio" value="1" type="radio" ng-model="radioM" 
        ng-required="true" >Main1</label>
   <label class="radio-inline">
   <input name="sampleinlineradio" value="2" type="radio" ng-model="radioM" 
        ng-required="true" >Main2</label>
   <label class="radio-inline">
   <input name="sampleinlineradio" value="3" type="radio" ng-model="radioM" 
        ng-required="true" >Main3</label></div>

   <div class="form-group">
   <label ng-repeat="branch in branches" >
   <input  type="checkbox" name="selectedBranches[]" value="{{branch.value}}" 
                ng-model="branch.selected" ng-required="true" >{{branch.name}}
   </label></div> 

   <div class="form-group">  
   <label class="searchlabel"> 
   <input name="searchinlineradio" value="showComponentSearch" type="radio" 
        ng-model="value" ng-required="true">Search By C_Number</label> 
   <input type="text" ng-model="search" >

   <label class="searchlabel">
   <input name="searchinlineradio" value="showDateRangeSearch" 
          type="radio" ng-model="value" >Search By Time</label></div>

   <input type="button" ng-click="fetchAll()" value="submit" 
          class="btn btn-success" ng-disabled="myForm.$invalid">  
</form>

UPDATE I added below code to the controller. Now what happens is the button get enabled when I select a radio from group1 and a checkbox from group2 without selecting a radio from last group. Also if I select a radio from group1 and a radio from group2 (button is still disabled) and then select checkbox the button gets enabled [(i.e.) if I change order it works fine].

In controller

$scope.branches= [ { name: 'B1', selected: false, value: '1'},
                   { name: 'B2', selected: false, value: '2'},
                   { name: 'B3', selected: false, value: '3'}
                  ];
//added this
$scope.isOneSelected = function() {
    return !$scope.branches.some(function(options) {
        return options.selected;
    });
};

It is because required is true for all checkboxes. You need to remove the ng-required from checkbox and add the condition in button to disable if no checkbox is checked. — Paulson Peter
– Paulson Peter, Commented Nov 17, 2016 at 7:27

Sajeetharan · Accepted Answer · 2016-11-17 19:18:19Z

0

You can use required for all the fields and you are using bootstrap datepicker, for that you need to check the $scope variable as well, do something like this,

<div ng-if="value == 'showDateRangeSearch'">
  <input type="button" ng-click="fetchAllstats()" value="Generate Report" class="btn btn-success" ng-disabled="myForm.$invalid && !fromDate && !toDate">
</div>
<div ng-if="value == 'showComponentSearch'">
  <input type="button" ng-click="fetchAllstats()" value="Generate Report" class="btn btn-success" ng-disabled="myForm.$invalid">
</div>

answered Nov 17, 2016 at 19:18

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sushen Suri · Accepted Answer · 2016-11-17 10:34:05Z

see this

your html

<form class="form-inline" name="myForm">
  <div class="form-group">
    <label class="radio-inline">
      <input name="sampleinlineradio" value="1" type="radio" ng-model="radioM" required="true">Main1</label>
    <label class="radio-inline">
      <input name="sampleinlineradio" value="2" type="radio" ng-model="radioM" required="true">Main2</label>
    <label class="radio-inline">
      <input name="sampleinlineradio" value="3" type="radio" ng-model="radioM" required="true">Main3</label>
  </div>
  <div class="form-group" ng-repeat="data in dataToUse">
    <label>{{userType.name}}
      <input type="checkbox" name="selectedBranches[]" value="{{data.value}}" ng-model="data._id" ng-click="checkboxTick()">
    </label>
  </div>
  <div class="form-group">
    <label class="searchlabel">
      <input name="searchinlineradio" value="showComponentSearch" type="radio" ng-model="value" required>Search By C_Number</label>
    <input type="text" ng-model="search">
    <label class="searchlabel">
      <input name="searchinlineradio" value="showDateRangeSearch" type="radio" ng-model="value" required>Search By Time</label>
  </div>
  <input type="button" ng-click="fetchAll()" value="submit" class="btn btn-success" ng-disabled="myForm.$invalid || checkTick.valu">
</form>

now the script

$scope.checkboxTick = function() {
var len = 0;
angular.forEach($scope.allUserTypes, function(v, k) {
  console.log(v, k);
  if (v._id == true) {
    len++;
  }
})
if (len > 0) {
  $scope.checkTick.valu = false;
 }
}
$scope.checkTick = {
  valu: true
};

$scope.dataToUse=[
{
  name : box1,
  id : 1
},{
  name : box2,
  id : 2
}
]

Icycool · Accepted Answer · 2016-11-17 13:47:48Z

Edit: It looks fine with the changes

angular.module('test', []).controller('Test', Test);

function Test($scope) {
  $scope.branches = [{
    name: 'B1',
    selected: false,
    value: '1'
  }, {
    name: 'B2',
    selected: false,
    value: '2'
  }, {
    name: 'B3',
    selected: false,
    value: '3'
  }];
  //added this
  $scope.isOneSelected = function() {
    return !$scope.branches.some(function(options) {
      return options.selected;
    });
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app='test' ng-controller='Test'>
  <form class="form-inline" name="myForm">
    <div class="form-group">
      <label class="radio-inline">
        <input name="sampleinlineradio" value="1" type="radio" ng-model="radioM" ng-required="true">Main1</label>
      <label class="radio-inline">
        <input name="sampleinlineradio" value="2" type="radio" ng-model="radioM" ng-required="true">Main2</label>
      <label class="radio-inline">
        <input name="sampleinlineradio" value="3" type="radio" ng-model="radioM" ng-required="true">Main3</label>
    </div>

    <div class="form-group">
      <label ng-repeat="branch in branches">
        <input type="checkbox" name="selectedBranches[]" value="{{branch.value}}" ng-model="branch.selected" ng-required="isOneSelected()">{{branch.name}}
      </label>
    </div>

    <div class="form-group">
      <label class="searchlabel">
        <input name="searchinlineradio" value="showComponentSearch" type="radio" ng-model="value" ng-required="true">Search By C_Number</label>
      <input type="text" ng-model="search">

      <label class="searchlabel">
        <input name="searchinlineradio" value="showDateRangeSearch" type="radio" ng-model="value">Search By Time</label>
    </div>

    <input type="button" ng-click="fetchAll()" value="submit" class="btn btn-success" ng-disabled="myForm.$invalid">
  </form>
</div>

Its bit confusing. Okay what i have to do for checkbox array validation in my case.
@user3844782 you forgot to put isOneSelected inside ng-required
No no i added. But forgot to add here. What else could be the reason ?

Collectives™ on Stack Overflow

AngularJS Validating group of radio buttons and checkboxes in a form

3 Answers 3

Comments

Comments

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

5 Comments

Linked

Related