Validar botón de radio AngularJS


78

Parece que debería ser bastante fácil, pero no encuentro la respuesta. Tengo un formulario en el que necesito validar que se ha realizado una selección de un grupo de radio. Intenté usar el atributo 'requerido' en los botones de opción, pero cuando se valida el formulario, se queja a menos que se seleccionen todos los botones de opción (lo cual es imposible por diseño).

¿Cuál es la forma correcta de validar una selección de grupo de radio en 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>

Al hacer clic en el botón enviar en Plnkr se muestra el comportamiento.

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

Respuestas:


126

Intente usar ng-required="!color". Esto hace que el campo solo sea obligatorio cuando el valor no está establecido. Si se establece un valor, se elimina required y pasará la validación.

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

Aquí hay un plunker actualizado que demuestra que el formulario ahora se valida correctamente: http://plnkr.co/edit/EdItU2IIkO1KIsC052Xx?p=preview

Actualizar

La respuesta de e-cloud es simple y no requiere una directiva adicional. Sugiero que todos usen ese método si es posible. Dejando esta respuesta aquí, ya que proporciona una solución funcional y demuestra el uso de la directiva ng-required.


2
ng-requireden lugar de simplemente requiredhacerlo. Gracias.
Spencer

¡Brillante! Gracias.
Rod Hartzell

esta solución no funciona, ni siquiera en la demostración de plnkr proporcionada.
Ahmed Hasn.

@ConquerorsHaki Parece que todavía funciona para mí. Se le permite enviar el formulario cuando se selecciona un valor. ¿Qué estas viendo?
dmullings

1
disculpe @dmullings debo haber confundido los plnkrs. ¡De hecho funciona como un encanto!
Ahmed Hasn.

98

Creo que lo que necesita es agregar un nombre para el grupo de radio, para una entrada de radio necesita un nombre para determinar a cuál pertenece, el enlace a continuación funciona con validación sin ng-required (la respuesta aceptada)

<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


Funciona bien, y el nombre del grupo es necesario para que el botón de radio funcione correctamente, especialmente si tiene varios grupos en un formulario ...
PhiLho

@ CilliéMalan, supongo que siempre funciona de esta manera. Al menos desde 1.2.
e-cloud

2
Algo importante a tener en cuenta es que un grupo de botones de opción se considera válido independientemente de que se seleccione una opción, a menos que al menos uno de los botones de opción de un grupo tenga el ng-modelatributo.
Robert Hickman

1
Otra cosa a tener en cuenta es que esto no soluciona el problema en el que se desea vincular la propiedad $touchedo $dirtyde ng-model, pero hay una solución alternativa (al menos para $dirty) donde ng-formse puede anidar y hacer referencia. Vea una pregunta similar aquí - stackoverflow.com/questions/22181462/…
jamiebarrow

0

Solución alternativa mediante directiva. La respuesta aceptada no me funcionó en Firefox (v 33.0).

La idea era establecer el atributo requerido en falso en todas las radios con un nombre de clase específico, al cambiar.

  • Se agregó jQuery porque tenía problemas con la función de eliminación de atributos de jqlite.
  • Copié tanto como pude del 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>

Si tiene una nueva pregunta, hágala haciendo clic en el botón Preguntar . Incluya un enlace a esta pregunta si ayuda a proporcionar contexto.
Taryn East

2
Lo siento, se suponía que era una solución alternativa que funciona en Firefox (v 33.0). La respuesta actualmente aceptada no funcionó para mí.
jroot

genial, entonces esta es una solución que funciona? Si es así, genial. Posiblemente, solo el lenguaje en su respuesta no lo hace súper obvio :)
Taryn East

0

En mi caso, estaba usando la biblioteca de materiales angularJS y agregar un requiredatributo a la <md-radio=group>etiqueta funcionó.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.