Introducción: por lo general, muchos sitios web brindan tipos relevantes de información y también botones de envío de apoyo como uno o más de uno también para continuar.
Por ejemplo,
- Se les pedirá a los usuarios que completen el formulario y hay opciones en forma de botones de envío como «enviar el formulario», «Borrar los campos» o incluso «Enlaces a páginas similares», etc.
- En la página de inicio principal de cualquier sitio web, podemos ver «Registrarse con correo electrónico», «Iniciar sesión», «Iniciar sesión a través de Google», «Iniciar sesión a través de Facebook», etc.
Cada envío debe manejarse de tal manera que deba realizar su acción respectiva. En este artículo, veamos cómo podemos hacerlo a través de AngularJS con nuestros siguientes ejemplos.
Explicación de los controles ng:
- ng-app: Nuestro elemento raíz y es una aplicación simple.
- ng-controller: Define el controlador de la aplicación. Aquí, «MainCtrl» es una función de JavaScript que ayudará a manejar múltiples botones de envío de la manera que nos gusta.
- Definimos un controlador con una variable expuesta en su instancia llamada nombre de usuario y contraseña.
- Señalamos el valor del modelo ng en la misma variable de nombre de usuario en MainCtrl.
- Por lo tanto, cualquier cambio en el cuadro de entrada actualizará el modelo en nuestro controlador.
- Cuando el valor de la variable cambia en el controlador, el campo de entrada obtiene el valor actualizado automáticamente.
- Podemos ver claramente que el código no usa ninguna identificación o CSS, debido a este modelo ng, los valores se actualizan automáticamente
- ng-click-> Se deben realizar acciones de clic en el botón.
- Se escriben dos funciones separadas, una para borrar valores y otra para enviar. Por lo tanto, la separación limpia se produce a través de estas diferentes funciones. Así se pueden escribir “n” número de funciones y desviar la funcionalidad de acuerdo a los requerimientos.
La ventaja es que el controlador nunca se ha comunicado en la interfaz de usuario, no hay selector de JQuery, no hay findElementById, etc. involucrados. Al actualizar los campos del modelo en el controlador, la interfaz de usuario se actualiza y también se pueden tomar los valores más recientes de una manera agradable con AngularJS.
Código de implementación:
HTML
<html ng-app="simpleapp">
<body ng-controller="MainCtrl as mainctrl">
UserName :
<input type="text" ng-model="mainctrl.username">
<br>
<br>
Password :
<input type="password" ng-model="mainctrl.password">
<br>
<br>
<button ng-click="mainctrl.clear()">
Clear Values
</button>
<button ng-click="mainctrl.submit()">
Submit
</button>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js">
</script>
<script type="text/javascript">
angular.module('simpleapp', [])
.controller('MainCtrl', [function () {
var self = this;
self.clear = function () {
// Clearing fields, given
// as empty values
self.username = '';
self.password = '';
};
self.submit = function () {
console.log('yOUR INFORMATION ',
self.username, self.password);
};
}]);
</script>
</body>
</html>
Producción:
Al hacer clic en «Borrar valores», la salida se ve como se muestra en la imagen
clearfields-> Al hacer clic en Clear Values, los valores ingresados se borran
Al hacer clic en «Enviar», la salida se ve como se muestra en la imagen
Enviar → Cuando se hace clic en el botón Enviar
Ejemplo 2: en el siguiente ejemplo, se realizan múltiples envíos a través de dos formularios diferentes y dos botones de envío. es decir, se usa «ng-submit» en lugar de los controles de botón.
En el primer formulario, el nombre de usuario y la contraseña están directamente en el controlador, mientras que, en el segundo formulario, están vinculados a un objeto de usuario en el controlador. Por lo tanto, al enviar el formulario, el código de salida difiere un poco. es decir, para el segundo formulario, podemos acceder directamente como self.user porque para el segundo formulario, nuestro modelo ng es mainctrl.user.username y mainctrl.user.password.
Entonces, durante el envío de form2, podemos obtener el valor como self.user. En ambas formas, podemos preferir. Pero si nos vinculamos a un objeto, se accede fácilmente a todos los contenidos del formulario a través de ese objeto.
HTML
<html ng-app="multiformapp">
<body ng-controller="MainCtrl as mainctrl">
<form ng-submit="mainctrl.form1submit()">
<input type="text" ng-model="mainctrl.username">
<input type="password" ng-model="mainctrl.password">
<input type="submit" value="Form 1 Submit">
</form>
<form ng-submit="mainctrl.form2submit()">
<input type="text" ng-model="mainctrl.user.username">
<input type="password" ng-model="mainctrl.user.password">
<input type="submit" value="Form 2 Submit">
</form>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js">
</script>
<script type="text/javascript">
angular.module('multiformapp', [])
.controller('MainCtrl', [function () {
var self = this;
self.form1submit = function () {
// Create user object to send
// to the server
var user = { username: self.username,
password: self.password };
console.log('First form information ',
self.username, self.password);
};
self.form2submit = function () {
console.log('Second form information ',
self.user);
};
}]);
</script>
</body>
</html>
Producción:
- Al hacer clic en «Enviar formulario 1», la salida se muestra como
Envío de FirstForm → Cuando se hace clic en el botón Enviar de Form1
- Al hacer clic en «Enviar formulario 2», la salida se muestra como
Envío de SecondForm → Cuando se hace clic en Enviar de Form2
Al verificar el resultado de los envíos de ambos formularios, Form 2 Submit proporciona una forma más fácil de acceder a los objetos del modelo.
Conclusión: AngularJS es muy fácil de usar y, dado que proporciona el marco MVC, la interfaz de usuario limpia y ordenada en HTML, el enlace bidireccional, etc. Depende de los requisitos, podemos manejar eventos para diferentes botones de envío fácilmente y desviar el flujo en consecuencia. .
Publicación traducida automáticamente
Artículo escrito por priyarajtt y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA