Formulario AngularJS Enviar con ejemplo [ng-submit]

Cómo enviar un formulario usando ng-submit

Los procesos de envío de información en una página web son normalmente manejados por el evento submit en el navegador web. Este evento se utiliza normalmente para enviar información que el usuario podría haber introducido 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 hacer a través de la 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 submit puede llevar a cabo algún procesamiento dentro del controlador y luego mostrar la información procesada al usuario.

Tomemos un ejemplo de cómo podemos lograr esto.

En nuestro ejemplo de envío,

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

Explicación del código:

  1. Primero estamos declarando nuestra etiqueta HTML de formulario, que mantendrá el control “cuadro de texto” y “botón de envío”. A continuación, estamos utilizando la directiva ng-submit para vincular la función “Display ()” a nuestro formulario. Esta función será definida en nuestro controlador y será llamada cuando se envíe el formulario.
  2. Tenemos un control de texto en el que el usuario introducirá el tema que desea aprender. Esto estará enlazado a una variable llamada ‘Topic’ que será utilizada en nuestro controlador.
  3. Existe el botón de envío normal en el que el usuario hará clic cuando haya introducido el tema que desea.
  4. Hemos utilizado la directiva ng-repeat para mostrar los elementos de lista de los temas que el usuario introduce. 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 introducidos por el usuario en el paso 2.
  6. Estamos definiendo el código de 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 push array para agregar los temas introducidos por el usuario a través de la variable ‘Topic’ en nuestra matriz ‘AllTopic’.

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

Salida:

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 (), que se llama cuando se pulsa el botón de envío.
  • La función Display () agrega el texto a la variable array 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 utiliza para procesar la entrada introducida por el usuario cuando se envía el formulario.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *