web-dev-qa-db-fra.com

Valider le bouton radio AngularJS

Cela semble être assez facile, mais je ne trouve pas la réponse. J'ai un formulaire où je dois valider qu'une sélection a été faite à partir d'un groupe de radio. J'ai essayé d'utiliser l'attribut "required" sur les boutons radio, mais lorsque le formulaire est validé, il se plaint à moins que tous les boutons radio ne soient sélectionnés (ce qui est impossible par conception).

Quelle est la bonne façon de valider une sélection de groupe de radio dans 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>

En cliquant sur le bouton d'envoi dans le Plnkr montre le comportement.

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

javascripthtmlformsangularjs
77
Spencer

Essayez d'utiliser ng-required="!color". Cela fait que le champ n'est requis que lorsque la valeur n'est pas définie. Si une valeur est définie, required est supprimé et la validation sera réussie.

<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/>

Voici un dépliant mis à jour qui montre que le formulaire est maintenant correctement validé: http://plnkr.co/edit/EdItU2IIkO1KIsC052Xx?p=preview

Mise à jour

le e-cloud answer est simple et ne nécessite pas de directive supplémentaire. Je suggère que tout le monde utilise cette méthode si possible. Laisser cette réponse ici, car elle fournit une solution efficace et montre l'utilisation de la directive ng-required.

122
dmullings

Je pense que ce dont vous avez besoin est d’ajouter un nom pour le groupe radio, car une entrée radio a besoin d’un nom pour déterminer le nom du groupe auquel elle appartient, le lien ci-dessous fonctionne pour la validation sans ng-required (la réponse acceptée)

<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

93
e-cloud

Solution alternative utilisant une directive. La réponse acceptée ne fonctionnait pas pour moi dans Firefox (v 33.0).

L'idée était de définir l'attribut requis sur false sur toutes les radios avec un nom de classe spécifique, lors d'un changement.

  • jQuery a été ajouté car j'avais des problèmes avec la fonction d'attribut remove de jqlite.
  • J'ai copié autant que possible du plunker original.

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
jroot