ng-submit en AngularJS: Manejo del envío de formularios con un ejemplo
james hartman
⚡ Resumen inteligente
En AngularJS, ng-submit vincula una función del controlador al evento de envío de un formulario en el navegador, de modo que los valores introducidos se procesan dentro del controlador y la página nunca se recarga mediante un POST predeterminado.
Directiva AngularJS ng-submit
El ng-enviar La directiva en AngularJS se utiliza para vincular la aplicación al evento de envío del navegador. Entonces en el caso de AngularJS En el evento de envío, puede realizar algún procesamiento dentro del propio controlador y luego mostrar la información procesada al usuario.
Nota de versión: AngularJS 1.x dejó de tener soporte a largo plazo el 31 de diciembre de 2021, y el equipo del framework confirma que El soporte para AngularJS ha finalizado oficialmente. en enero de 2022, por lo que no hay lanzamientos ni parches de seguridad posteriores. Cada paso y bloque de código a continuación se mantiene exactamente como está escrito, como referencia histórica. El trabajo nuevo pertenece a Angular moderno, que expresa la misma idea que (ngSubmit) vinculado a un FormGroup.
Cómo enviar un formulario en AngularJS usando ng-submit
Los procesos de envío de información en una página web normalmente los maneja el evento de envío en el navegador web. Este evento normalmente se utiliza para enviar información que el usuario podría haber ingresado en una página web al servidor para su posterior procesamiento, como credenciales de inicio de sesión, datos de formulario, etc. El envío de información se puede realizar mediante una solicitud GET o POST.
Tomemos un ejemplo de envío de formulario Angular para ver cómo enviar formularios en AngularJS.
En nuestro ejemplo de envío de formulario de AngularJS, presentaremos un cuadro de texto al usuario en el que podrá ingresar el tema que desea aprender. Habrá un botón de envío en la página que, al presionarlo, agregará el tema a una lista desordenada.
La ilustración a continuación traces que fluyen, desde el tema escrito en el cuadro de texto, a través del botón Enviar, hasta el elemento de la lista agregado debajo.
Ejemplo de envío de formulario AngularJS
Ahora, veremos un ejemplo de envío de formulario AngularJS desde el controlador usando la directiva ng-submit:
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-controller="AngularController">
<form ng-submit="Display()">
Enter which topic you would like to learn
<input type="text" ng-app="sampleApp" ng-model="Topic"><br>
<input type="submit" value="Submit"/>
<ul ng-repeat="topicname in AllTopic">
<li>{{topicname}}</li>
</ul>
</form>
</div>
<script>
var sampleApp = angular.module("sampleApp",[]);
sampleApp.controller("AngularController",function($scope) {
$scope.AllTopic=[];
$scope.Display = function () {
$scope.AllTopic.push($scope.Topic);
}
});
</script>
</body>
</html>
Code Explicación:
- Primero, declaramos la etiqueta HTML de nuestro formulario, que contendrá el cuadro de texto y el botón de envío, como se muestra en el ejemplo del evento de envío de formulario de Angular. Luego, usamos la directiva ng-submit de AngularJS para vincular la función Display() a nuestro formulario. Esta función se definirá en nuestro controlador y se llamará cuando se envíe el formulario.
- Contamos con un control de texto en el cual el usuario ingresará el Tema que desea aprender. Esto estará vinculado a una variable llamada "Tema" que se utilizará en nuestro controlador.
- Existe el botón de envío normal en AngularJS en el que el usuario hará clic cuando haya ingresado el tema que desea.
- Hemos usado el ng-repetir directiva para mostrar elementos de la lista de los temas que ingresa el usuario. La directiva ng-repeat recorre cada tema en la matriz 'AllTopic' y muestra el nombre del tema en consecuencia.
- En nuestro controlador, declaramos una variable de tipo array llamada 'AllTopic'. Esta se utilizará para almacenar todos los temas introducidos por el usuario en el paso 2.
- Estamos definiendo el código para nuestra función Display() que se llamará cada vez que el usuario haga clic en el botón Enviar. Aquí estamos usando la función de matriz de inserción para agregar los temas ingresados por el usuario a través de la variable "Tema" en nuestra matriz "Todos los temas".
Si el código de ejemplo del formulario AngularJS se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute el código en el navegador.
Salida:
Para ver el código funcionando, primero ingrese un nombre de tema como “Angular” como se muestra arriba en el cuadro de texto y luego haga clic en el botón Enviar.
- Después de hacer clic en el botón Enviar, verá el elemento que se ingresó en el cuadro de texto agregado a la lista de elementos.
- Esto se logra mediante la función Display(), que se llama cuando se presiona el botón de enviar.
- La función Display() agrega el texto a la variable de matriz llamada 'AllTopic'. Y nuestra directiva ng-repeat pasa por cada valor en la variable de matriz 'AllTopic' y los muestra como elementos de lista en consecuencia.
ng-submit vs ng-click: cuál usar
Ambos Directivas de AngularJS Pueden llamar a la misma función del controlador, pero escuchan diferentes eventos del navegador. ng-submit se sienta en el <form> La etiqueta reacciona al evento de envío, por lo que también se activa cuando un usuario presiona Enter dentro de un campo. ng-click Se sitúa sobre un botón y reacciona únicamente a un clic del ratón o a una activación equivalente.
| Aspecto | ng-enviar | ng-clic |
|---|---|---|
| Elemento anfitrión | La etiqueta de formulario | Cualquier elemento en el que se pueda hacer clic |
| Evento escuchado | enviar, incluyendo la tecla Enter | solo clic |
| POST del navegador predeterminado | Suprimido por la directiva | Todavía se dispara desde un botón de envío |
| Acceso al formulario estatal | Lee $valid y $invalid en el controlador del formulario. | No tiene contexto formal propio |
| Ajuste natural | Entrega de datos de formulario a un controlador | Botones de la barra de herramientas, enlaces, activadores modales |
La compatibilidad con teclado suele ser determinante para la elección. Un formulario con cable ng-click Solo ignora la tecla Enter, lo que frustra a los usuarios que completan un cuadro de inicio de sesión. Reservar ng-click para acciones que no sean el envío de formularios, como borrar un campo o abrir un cuadro de diálogo.
¿Por qué ng-submit impide el envío predeterminado del navegador?
Un formulario HTML simple reacciona a un evento de envío serializando sus campos y pidiéndole al navegador que cargue una nueva página, que descarta cada valor contenido en $scope. La función de ng-submit La directiva impide que eso suceda: llama preventDefault() para ti, de modo que la expresión se ejecuta y la página actual permanece en su lugar. No $event No se requiere ningún argumento ni llamada manual.
La supresión tiene una condición documentada. Según la Referencia de ngSubmit, la acción predeterminada se impide solo mientras el formulario no contiene action, data-action or x-action atributo. Agregue cualquiera de esos y el navegador navegará como de costumbre después de que el controlador termine, que es el comportamiento correcto para un formulario renderizado en el servidor con mejora progresiva y una sorpresa en cualquier otro caso.
Debido a que la directiva absorbe el objeto de evento, lea los valores enviados de las propiedades que modelo ng escribir en el ámbito, o pasarlos explícitamente, como en ng-submit="Display(Topic)".
Cómo validar un formulario antes de que se ejecute ng-submit
El ejemplo anterior acepta un tema vacío, porque nada comprueba primero el cuadro de texto. AngularJS crea un controlador de formulario para cada formulario con nombre, y ese controlador expone las banderas necesarias para controlar el envío. Agregar novalidate por lo que el navegador deja sus propias burbujas HTML5 desactivadas y AngularJS validación de formulario se hace cargo.
- Dale al formulario un
nameAngularJS publica un controlador con ese nombre en el entorno. controlador alcance. - Agregar
novalidatea la etiqueta del formulario para que la validación nativa del navegador no interfiera. - Marque los campos, usando
required,ng-minlength,ng-maxlengthorng-pattern. - Proteja al manejador con
$validy pasar el controlador del formulario para que la función pueda inspeccionar los campos individuales. - Deshabilitar el botón con
ng-disabledseñalando a$invalid, que proporciona retroalimentación visual inmediata.
<form name="topicForm" ng-submit="topicForm.$valid && Display(topicForm)" novalidate> <input type="text" name="Topic" ng-model="Topic" required> <input type="submit" value="Submit" ng-disabled="topicForm.$invalid"> </form>
La mayoría de los problemas reportados con este patrón se deben a dos errores:
- Double sumisión. Encuadernación
ng-clicken el botón de enviar mientrasng-submitSe coloca en el formulario y ejecuta el controlador dos veces, una vez por evento. La documentación oficial advierte que no se deben combinar los dos controladores, así que elija uno. - Envíos inesperados. Cualquier botón dentro de un formulario sin
type="button"Genera el evento de envío. Marque explícitamente los botones de cancelar y restablecer; de lo contrario, también activarán el controlador.
Vigilando en $valid Es una medida de conveniencia, no un control de seguridad. Los valores aún deben validarse nuevamente en el servidor antes de ser almacenados.
