<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="formulario" ng-controller="formCtrl">
<h1>Formularios con validaciones</h1>
<form name="formulario">
<div class="form-group">
<label for="email">Correo electrónico:</label>
<input type="email" class="form-control" id="email" ng-model="datos.correo">
</div>
<div class="form-group">
<label for="pwd">Clave de acceso:</label>
<input type="password" class="form-control" id="pwd" name="pwd" ng-model="datos.clave" required validar-longitud>
</div>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="datos.recordarme"> Recordarme</label>
</div>
<button type="submit" class="btn btn-default" ng-click="enviar()">Enviar</button>
</form>
<div class="alert alert-success">
<strong>Datos del formulario:</strong> {{datos | json}}
</div>
<div class="alert alert-warning">
<strong>La clave es válida </strong> {{formulario.pwd.$valid}}
</div>
<div class="alert alert-info">
<strong>El valor será visible cuando la clave tenga menos de cinco caracteres: </strong> {{formulario.pwd.$error.textoCorto}}
</div>
</body>
</html>
// Code goes here
var app = angular.module('formulario', []);
app.controller('formCtrl', function($scope) {
$scope.datos = {
correo: 'abc@xyz.com',
clave: 'Insegura',
recordarme: true
};
$scope.enviar = function() {
alert('Formulario enviado');
};
});
app.directive('validarLongitud', function() {
return {
require: 'ngModel',
link: function(scope, element, attr, mCtrl) {
function myValidation(value) {
if (value.length < 5) {
mCtrl.$setValidity('textoCorto', false);
} else {
mCtrl.$setValidity('textoCorto', true);
}
return value;
}
mCtrl.$parsers.push(myValidation);
}
};
});
/* Styles go here */
Uso de formularios
Validaciones