Validar botón de radio AngularJS

Question 1

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

Question 2

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.

Question 3

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

Question 4

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>

Question 5

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

Answer 1

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

Answer 2

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.

embotamientos
fuente

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.

Answer 3

2

ng-requireden lugar de simplemente requiredhacerlo. Gracias.

Spencer

Answer 4

¡Brillante! Gracias.

Rod Hartzell

Answer 5

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

Ahmed Hasn.

Answer 6

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

dmullings

Answer 7

1

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

Ahmed Hasn.

Answer 8

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

nube electrónica
fuente

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

Answer 9

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

Answer 10

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

e-cloud

Answer 11

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

Answer 12

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

Answer 13

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>

Answer 14

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

Answer 15

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

Answer 16

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

Answer 17

0

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

NotABot
fuente

Validar botón de radio AngularJS

Respuestas:

Actualizar