Envío de formulario AngularJS con ejemplo (ng-submit)

Anonim

Cómo enviar un formulario usando ng-submit

Los procesos de envío de información en una página web normalmente son manejados por el evento de envío en el navegador web. Este evento se usa normalmente para enviar información que el usuario podría haber ingresado en una página web al servidor para su procesamiento posterior, como credenciales de inicio de sesión, datos de formulario, etc. El envío de información se puede realizar a través de una solicitud GET o POST.

AngularJS también proporciona una directiva llamada ng-submit que se puede usar 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 controlador y luego mostrar la información procesada al usuario.

Tomemos un ejemplo de cómo podemos lograrlo.

En nuestro ejemplo de envío de publicación,

Vamos a presentar un cuadro de texto al usuario en el que puede ingresar el tema que quiere aprender. Habrá un botón de envío en la página, que cuando se presiona agregará el tema a una lista desordenada.

Event Registration

Guru99 Global Event


   Enter which topic you would like to learn
   

    

  • {{topicname}}
    •

Explicación del código:

  1. Primero declaramos nuestra etiqueta HTML de formulario, que contendrá el control "cuadro de texto" y "botón de envío". Entonces estamos usando la directiva ng-submit 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.
  2. Contamos con un control de texto en el que el usuario ingresará el Tema que desea aprender. Esto estará vinculado a una variable llamada 'Tema' que se utilizará en nuestro controlador.
  3. Existe el botón de envío normal en el que el usuario hará clic cuando haya ingresado al tema que desea.
  4. Hemos utilizado la directiva ng-repeat para mostrar elementos de la lista de los temas que ingresa el usuario. La directiva ng-repeat pasa por cada tema de la matriz 'AllTopic' y muestra el nombre del tema en consecuencia.
  5. En nuestro controlador, estamos declarando una variable de matriz llamada 'AllTopic'. Esto se utilizará para contener todos los temas ingresados ​​por el usuario en el Paso 2.
  6. 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 empuje para agregar los temas ingresados ​​por el usuario a través de la variable 'Tema' en nuestra matriz 'AllTopic'.

Si el código se ejecuta correctamente, se mostrará el siguiente resultado cuando ejecute su código en el navegador.

Producción:

Para ver el código funcionando, primero ingrese un nombre de tema como "AngularJS" 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 (), a la que se llama cuando se presiona el botón 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.

Resumen

La directiva "ng-submit" se usa para procesar la entrada ingresada por el usuario cuando se envía el formulario.