发表新帖
发表新帖

Validate Radio Button AngularJS

后端 未结
关注
4 1883
Happy的楠姐
Happy的楠姐 2020-12-04 20:32

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 trie

相关标签:
4条回答
  • 情话喂你
    2020-12-04 21:09

    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>
    0 讨论(0)
  • 旧时难觅i
    2020-12-04 21:13

    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.

    0 讨论(0)
  • 无人及你
    2020-12-04 21:29

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

    0 讨论(0)
  • 鱼传尺愫
    2020-12-04 21:32

    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

    0 讨论(0)
 看不清?
提交回复
热议问题