<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="//code.angularjs.org/1.2.19/i18n/angular-locale_es-es.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="PruebaController">
<form name="miFormulario" novalidate >
Nombre:<input type="text" ng-model="model.nombre" name="nombre" ng-maxlength="50" ng-minlength="3" ng-required="requeridoNombre" ng-pattern="patternNombre" >
<span ng-show="miFormulario.nombre.$error.maxlength">El tamaño máximo debe ser 50</span>
<span ng-show="miFormulario.nombre.$error.minlength">El tamaño mínimo debe ser 3</span>
<span ng-show="miFormulario.nombre.$error.pattern">No cumple la expresión regular</span>
<span ng-show="miFormulario.nombre.$error.required && miFormulario.nombre.$dirty">El campo es requerido</span>
<br>
Correo eletronico:<input type="email" ng-model="model.correo" name="correo" >
<span ng-show="miFormulario.correo.$error.email">El formato del correo no es correcto</span>
<br>
Edad:<input type="number" ng-model="model.edad" name="edad" min="18" max="99" >
<span ng-show="miFormulario.edad.$error.number">No es un número</span>
<span ng-show="miFormulario.edad.$error.min">La edad mínima es de 18 años</span>
<span ng-show="miFormulario.edad.$error.max">La edad máxima es de 99 años</span>
<br>
Sitio web:<input type="url" ng-model="model.sitioweb" name="sitioweb" >
<span ng-show="miFormulario.sitioweb.$error.url">El formato de la URL no es correcta</span>
<br>
<button ng-click="enviar()" ng-disabled="miFormulario.$invalid" >Enviar</button>
</form>
<br>
miFormulario.nombre.$error.pattern: {{miFormulario.nombre.$error.pattern}}
<br>
miFormulario.nombre.$error.required: {{miFormulario.nombre.$error.required}}
<br>
miFormulario.nombre.$error.minlength: {{miFormulario.nombre.$error.minlength}}
<br>
miFormulario.nombre.$error.maxlength: {{miFormulario.nombre.$error.maxlength}}
<br>
miFormulario.correo.$error.email: {{miFormulario.correo.$error.email}}
<br>
miFormulario.edad.$error.number: {{miFormulario.edad.$error.number}}
<br>
miFormulario.edad.$error.min: {{miFormulario.edad.$error.min}}
<br>
miFormulario.edad.$error.max: {{miFormulario.edad.$error.max}}
<br>
miFormulario.sitioweb.$error.url: {{miFormulario.sitioweb.$error.url}}
</body>
</html>
var app = angular.module("app", []);
app.controller("PruebaController", ['$scope',function($scope) {
$scope.requeridoNombre=true;
$scope.patternNombre=/^[a-zA-Z]*$/;
$scope.enviar=function() {
if ($scope.miFormulario.$valid) {
alert("Los datos aqui se habrían enviado al servidor y estarían validados en la parte cliente");
}else {
alert("Hay datos inválidos");
}
}
}]);
Validaciones en un formulario
.ng-invalid {
border-color: red;
}