Directiva ng-required
Hace unos días estuve haciendo una aplicación de formularios para un cliente y decidí utilizar AngularJS para controlar el formulario. Este consistía en una colección de preguntas con valoraciones por radiobuttons del 1 al 10 y si el encuestado contestaba en alguna de ellas menos de 5 se debía de abrir una sección nueva y requerida donde explicase la razón de la respuesta.
Para ello utilicé la directiva ng-required, que como supongo ya habréis imaginado sirve para determinar si un campo es requerido o no, de modo que la utilicé de una forma similar a como vamos a ver en el siguiente ejemplo.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Uso de la directiva ng-required</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>
<body ng-app="" ng-controller="formController">
<form method="" action="">
Pregunta:
<input type="radio" name="pregunta" value="1" ng-model="encuesta" required> Sí<br/>
<input type="radio" name="pregunta" value="2" ng-model="encuesta"> No <br/>
<div ng-show="preguntajust">
Por favor Indique por que ha contestado <b>No</b><br/>
<textarea name="justificacion" rows="10" cols="50" ng-required="requerido"></textarea>
</div>
<input type="submit" value="ENVIAR" name="enviar">
</form>
valor = {{encuesta}}
{{control()}}
<script>
function formController ($scope) {
$scope.preguntajust = false;
$scope.control = function(){
var x;
x = $scope.encuesta;
if (x == 2){
$scope.preguntajust = true;
$scope.requerido = true;
}else{
$scope.preguntajust = false;
$scope.requerido = false;
}
}
}
</script>
</body>
</html>
En las primeras líneas vemos que creamos el formulario, como siempre indicando las directivas ng-app y ng-controller y dentro de los inputs recogiendo el valor de la misma con ng-model. Nada que no hayamos visto ya en los formularios.
Lo interesante empieza en el script, que como siempre debe de ir en un archivo aparte, pero que aquí pongo por pedagogía en el mismo archivo.
En el script lo que hacemos es marcar un valor por defecto a la directiva ng-show, en nuestro caso false porque no queremos que se vea, y a continuación trabajar con nuestra función control()
Una vez estamos dentro de la función de control, lo que hacemos es capturar el valor de la respuesta del usuario y la comparamos por medio de un if a los valores que necesitemos.
La estructura ifelse va a modificar las directivas ng-show y ng-required según lo necesitemos.
De esta forma podemos exigir que el campo sea requerido o no, solo si el usuario realiza ciertas acciones.
El ejemplo es plenamente funcional y espero que os sirva para vuestros proyectos.
