javascript - change - radio buttons angular js
Validar el botón de radio AngularJS (3)
Parece que debería ser bastante fácil, pero no estoy encontrando la respuesta. Tengo un formulario donde necesito validar que se ha hecho 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.
Creo que lo que necesita es agregar un nombre para el grupo de radio, porque una entrada de radio necesita un nombre para determinar a cuál pertenece, el siguiente enlace funciona la 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/>
Intenta usar ng-required="!color" . Esto hace que el campo solo sea necesario cuando el valor no está establecido. Si se establece un valor, entonces se elimina el requerido 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 valida correctamente: http://plnkr.co/edit/EdItU2IIkO1KIsC052Xx?p=preview
Actualizar
La answer 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 de trabajo y demuestra el uso de la directiva ng-required.
Solución alternativa usando una directiva. La respuesta aceptada no funcionó para mí 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, en el cambio.
- Se agregó jQuery porque estaba teniendo problemas con la función de eliminación de jqlite.
- Copié lo más posible 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>