validacion formularios angularjs bootstrap
validacion formularios angularjs bootstrap
HTML
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.css">
<div ng-app="myApp">
<div ng-controller="Padre1Controller">
<!--novalidate desactiva el validador nativo del navegador-->
<form method="post" name="ejemploForm" novalidate>
<div class="form-group">
<label>Nombre</label>
<input type="text" name="ejemploName" ng-model="ejemplo.name" class="form-control" placeholder="Nombre" required/>
</div>
<!--$dirty nos indica si el input ha sido modificado alguna vez -->
<!--Angular detecta según el tipo de input la validación del formulario -->
<!-- Si el input deja de 'ser virgen', y el input es invalido, entonces mostramos el div y dentro los span correspondientes -->
<div class="alert alert-info" ng-show="ejemploForm.ejemploName.$dirty && ejemploForm.ejemploName.$invalid">
<!-- Si el input tiene required, quiere decir que es obligario, y $error.required es true si no se cumple esa condición -->
<span ng-show="ejemploForm.ejemploName.$error.required">Escribe el nombre</span>
</div>
<div class="form-group">
<label>Correo</label>
<input type="email" name="ejemploCorreo" ng-model="ejemplo.correo" class="form-control" placeholder="Correo" required/>
</div>
<div class="alert alert-info" ng-show="ejemploForm.ejemploCorreo.$dirty && ejemploForm.ejemploCorreo.$invalid"> <span ng-show="ejemploForm.ejemploCorreo.$error.required">Escribe el correo</span>
<span ng-show="ejemploForm.ejemploCorreo.$error">Correo no válido</span>
</div>
<div class="form-group">
<label>Edad</label>
<input type="number" name="ejemploEdad"...
JavaScript
var myApp = angular.module('myApp', []);
myApp.controller('Padre1Controller', function ($scope) {
$scope.actionForm=function(){
alert('Acción formulario');
};
});