AngularJS ng-submit con ejemplo de envío de formulario

Directiva AngularJS ng-submit

La 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.

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.

Enviar un formulario en AngularJS usando ng-submit

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()">
        &nbsp;&nbsp;&nbsp;
        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>

Explicación del código:

Primero declaramos nuestra etiqueta HTML de formulario, que contendrá el control del “cuadro de texto” y del “botón de envío”, como se muestra en el ejemplo del evento de envío de formulario de Angular. Luego, usamos la directiva ngsubmit de Angular 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 matriz llamada "AllTopic". Esto se usará para contener todos los temas ingresados 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.

Resum

La directiva "ng-submit" se utiliza para procesar la entrada ingresada por el usuario para el envío del formulario en AngularJS.
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.
El envío de información se puede realizar mediante solicitud GET o POST.
La función Display() agrega el texto a la variable de matriz llamada "AllTopic".

Te podría gustar: