ng-tutorial/formulario.html at master · yesmagaly/ng-tutorial · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Formulario</title>
	<link rel="stylesheet" href="public/lib/bootstrap/dist/css/bootstrap.min.css">

	<script src="public/lib/angular/angular.min.js"></script>
	<script src="formulario.js"></script>
</head>
<body ng-app>
<div class="container">
	<h1>Formulario de AngularJS</h1>
	<hr>

	<form role="form" name="forma">
		<div class="form-group" ng-class="{'has-error': forma.nombreU.$invalid, 'has-success': forma.nombreU.$valid}">
			<label for="inputNombre">Nombre</label>
			<input id="inputNombre" type="text" class="form-control" placeholder="Nombre" name="nombreU" ng-model="usuario.nombre" required>
		</div>
		<div class="form-group" ng-class="{'has-error': forma.emailU.$invalid, 'has-success': forma.emailU.$valid}">
			<label for="inputEmail">Email</label>
			<input id="inputEmail" type="email" class="form-control" placeholder="email" name="emailU" ng-model="usuario.email" required>
			<div ng-show="forma.emailU.$dirty && forma.emailU.$invalid">
				<p class="help-block text-danger" ng-show="forma.emailU.$error.required">Campo obligatorio.</p>
				<p class="help-block text-danger" ng-show="forma.emailU.$error.email">Email inválido.</p>
			</div>
		</div>
		<div class="checkbox">
			<label>
				<input type="checkbox" name="aceptoU" ng-model="usuario.acepto" required> Acepto.
			</label>
		</div>
		<button class="btn btn-success" ng-disabled="forma.$invalid">Registrar</button>
	</form>

	<hr>
	<span class="lead text-primary"></span>
</div>

</body>
</html>