CODEWITHSUNDEEP
javascripthtmlformsangularjs
Spencer
Spencer

Reputation: 2245

Validate Radio Button AngularJS

This seems like it should be fairly easy, but I'm not finding the answer. I have a form where I need to validate that a selection has been made from a radio group. I tried using the 'required' attribute on the radio buttons, but when the form is validated it complains unless all the radio buttons are selected (which is impossible by design).

What is the proper way to validate a radio group selection in AngularJS?

<form name="myForm" ng-submit="submitForm()" ng-controller="ExampleController">
  <input type="radio" ng-model="color" value="red" required>  Red <br/>
  <input type="radio" ng-model="color" value="green" required> Green <br/>
  <input type="radio" ng-model="color" value="blue" required> Blue <br/>
  <tt>color = {{color | json}}</tt><br/>
  <button type="submit">Submit</button>
</form>

Clicking the submit button in the Plnkr shows the behavior.

http://plnkr.co/edit/3qcIbMvJk19OvokcHe2N?p=preview

Upvotes: 78

Views: 87162

Answers (4)

NotABot
NotABot

Reputation: 801

In my case, I was using angularJS material library and adding required attribute to <md-radio=group> tag did the trick.

Upvotes: 0

dmullings
dmullings

Reputation: 7200

Try using ng-required="!color". This makes it so that the field is only required when the value is not set. If a value is set, then required is removed and it will pass validation.

<input type="radio" ng-model="color" value="red" ng-required="!color">  Red <br/>
<input type="radio" ng-model="color" value="green" ng-required="!color"> Green <br/>
<input type="radio" ng-model="color" value="blue" ng-required="!color"> Blue <br/>

Here is an updated plunker that demonstrates that the form now validates correctly: http://plnkr.co/edit/EdItU2IIkO1KIsC052Xx?p=preview

Update

e-cloud's answer is simple and doesn't require an additional directive. I suggest everyone use that method if possible. Leaving this answer here as it does provide a working solution and demonstrates the use of the ng-required directive.

Upvotes: 128

e-cloud
e-cloud

Reputation: 4471

I think what you need is to add a name for the radio group, for a radio input need a name to determine which it belongs to, the link below works validation without ng-required(the accepted answer)

<input type="radio" name='group' ng-model="color" value="red" required>  Red <br/>
<input type="radio" name='group' ng-model="color" value="green" required> Green <br/>
<input type="radio" name='group' ng-model="color" value="blue" required> Blue <br/>

http://plnkr.co/edit/LdgAywfC6mu7gL9SxPpC?p=preview

Upvotes: 98

jroot
jroot

Reputation: 320

Alternative solution using a directive. Accepted answer didn't work for me in Firefox (v 33.0).

The idea was to set the required attribute to false on all radios with a specific class name, on change.

  • jQuery was added because I was having trouble with the jqlite remove attribute function.
  • I copied as much as possible from the original plunker.

http://plnkr.co/edit/nbzjQqCAvwNmkbLW5bxN?p=preview

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-radio-input-directive-production</title>
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
</head>
<body ng-app="radioExample">
  <script>
    angular.module('radioExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.myObject= {};

      $scope.specialValue = {
        "id": "12345",
        "value": "green"
      };

      $scope.submitForm = function() {
        alert('valid');
      }

    }])
    .directive('colorChoice', function() {
      return {
        restrict: 'E',
        template: '<div ng-repeat="c in colors"><input class="colorClass" type="radio" value={{c}} ng-model="myObject.color" required />{{c}}</div>',
        link: function(scope, element, attrs) {
          scope.colors = ['Red', 'Green', 'Blue'];

          element.on('change', function(){
            $(".colorClass").attr("required", false);
          });
        }
      }
    });
  </script>
  <form name="myForm" ng-submit="submitForm()" ng-controller="ExampleController">
    <color-choice></color-choice>
    <tt>color = {{myObject.color | json}}</tt><br/>
    <button type="submit">Submit</button>
  </form>

</body>
</html>

Upvotes: 0

Related Questions