Inclusión de AngularJS Módulos de AngularJS

Formularios de AngularJS

AngularJS enriquece la llenado y validación de formularios. Podemos usar el evento ngclick para manejar el botón click y usar las marcas $dirty y $invalid para realizar validaciones suaves. Se puede desactivar cualquier validación específica del navegador utilizando novalidate en la declaración del formulario. Los controles de formulario utilizan abundantemente eventos de AngularJS. Veamos estos eventos.

eventos

AngularJS proporciona varios eventos asociados con los controles HTML. Por ejemplo, ng-La instrucción click generalmente se asocia con los botones. AngularJS admite los siguientes eventos-

ng-click
ng-dbl-click
ng-mousedown
ng-mouseup
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-keydown
ng-keyup
ng-keypress
ng-change

ng-click

使用按钮的ng-click指令重置表单数据。

<input name = "firstname"　type = "text"　ng-model = "firstName" required>
<input name = "lastname"　type = "text"　ng-model = "lastName" required>
<input name = "email"　type = "email"　ng-model = "email"　required>
<button ng-click = "reset()">Reset</button>
<script>
　　　function studentController($scope)　{　
　　　　　　$scope.reset = function() {
　　　　　　　　　$scope.firstName = "Mahesh";
　　　　　　　　　$scope.lastName = "Parashar";
　　　　　　　　　$scope.email = "[email protected]";
　　　　　　}　　　
　　　　　　
　　　　　　$scope.reset();
　　　}
</script>

Validación de datos

El siguiente contenido se puede usar para rastrear errores.

$dirty −Indique que el valor ha cambiado.
$invalid −Indique que el valor de entrada no es válido.
$error −Indique el error específico.

Ejemplo en línea

A continuación se muestra un ejemplo que presenta todas las instrucciones anteriores.

testAngularJS.htm

Ejemplo

<html>
　　　<head>
　　　　　　<title>Angular　JS　Forms</title>
　　　　　　<script　src　= "https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js"></script>
　　　　　　
　　　　　　<style>
　　　　　　　　　table,　th　,　td　{
　　　　　　　　　　　　border:　1px　solid　grey;
　　　　　　　　　　　　border-collapse:　collapse;
　　　　　　　　　　　　padding:　5px;
　　　　　　　　　}
　　　　　　　　　table　tr:nth-child(odd)　{
　　　　　　　　　　　　background-color:　#f2f2f2;
　　　　　　　　　}
　　　　　　　　　table　tr:nth-child(even)　{
　　　　　　　　　　　　background-color:　#ffffff;
　　　　　　　　　}
　　　　　　</style>
　　　　　　
　　　</head>
　　　<body>
　　　　　　
　　　　　　<h2>AngularJS-表单示例</h2>
　　　　　　<div　ng-app = "mainApp"　ng-controller = "studentController">
　　　　　　　　　
　　　　　　　　　<form name = "studentForm" novalidate>
　　　　　　　　　　　　<table border = "0">
　　　　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　　　　<td>Ingrese nombre:</td>
　　　　　　　　　　　　　　　　　　<td><input name = "firstname" type = "text" ng-model = "firstName" required>
　　　　　　　　　　　　　　　　　　　　　<span style = "color:red" ng-show = "studentForm.firstname.$dirty && studentForm.firstname.$invalid">
　　　　　　　　　　　　　　　　　　　　　　　　<span ng-show = "studentForm.firstname.$error.required">Debe ingresar un nombre.</span>
　　　　　　　　　　　　　　　　　　　　　</span>
　　　　　　　　　　　　　　　　　　</td>
　　　　　　　　　　　　　　　</tr>
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　　　　<td>Ingrese apellido:　</td>
　　　　　　　　　　　　　　　　　　<td><input name = "lastname" type = "text" ng-model = "lastName" required>
　　　　　　　　　　　　　　　　　　　　　<span style = "color:red" ng-show = "studentForm.lastname.$dirty && studentForm.lastname.$invalid">
　　　　　　　　　　　　　　　　　　　　　　　　<span ng-show = "studentForm.lastname.$error.required">Debe ingresar un apellido.</span>
　　　　　　　　　　　　　　　　　　　　　</span>
　　　　　　　　　　　　　　　　　　</td>
　　　　　　　　　　　　　　　</tr>
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　　　　<td>Email:　</td><td><input name = "email" type = "email" ng-model = "email" length = ""100" required>
　　　　　　　　　　　　　　　　　　　　　<span style = "color:red" ng-show = "studentForm.email.$dirty && studentForm.email.$invalid">
　　　　　　　　　　　　　　　　　　　　　　　　<span ng-show = "studentForm.email.$error.required">El correo electrónico es obligatorio.</span>
　　　　　　　　　　　　　　　　　　　　　　　　<span ng-show = "studentForm.email.$error.email">Dirección de correo electrónico no válida.</span>
　　　　　　　　　　　　　　　　　　　　　</span>
　　　　　　　　　　　　　　　　　　</td>
　　　　　　　　　　　　　　　</tr>
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　　　　<td>
　　　　　　　　　　　　　　　　　　　　　<button ng-click = "reset()">Reset</button>
　　　　　　　　　　　　　　　　　　</td>
　　　　　　　　　　　　　　　　　　<td>
　　　　　　　　　　　　　　　　　　　　　<button ng-disabled = "studentForm.firstname.$dirty &&
　　　　　　　　　　　　　　　　　　　　　　　　studentForm.firstname.$invalid || studentForm.lastname.$dirty &&
　　　　　　　　　　　　　　　　　　　　　　　　studentForm.lastname.$invalid || studentForm.email.$dirty &&
　　　　　　　　　　　　　　　　　　　　　　　　studentForm.email.$invalid"　ng-click="submit()">Enviar</button>
　　　　　　　　　　　　　　　　　　</td>
　　　　　　　　　　　　　　　</tr>
　　　　　　　　　　　　</table>
　　　　　　　　　</form>
　　　　　　</div>
　　　　　　
　　　　　　<script>
　　　　　　　　　var mainApp = angular.module("mainApp", []);
　　　　　　　　　
　　　　　　　　　mainApp.controller('studentController', function($scope) {
　　　　　　　　　　　　$scope.reset = function() {
　　　　　　　　　　　　　　　$scope.firstName = "Sea";
　　　　　　　　　　　　　　　$scope.lastName = "Gull";
　　　　　　　　　　　　　　　$scope.email = "[email protected]";
　　　　　　　　　　　　}
　　　　　　　　　　　　
　　　　　　　　　　　　$scope.reset();
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>

Probar y ver‹/›

Resultados de salida

Abrir el archivo en el navegador de red.testAngularJS.htmy ver los resultados.