Envio de formulário AngularJS com exemplo (ng-submit)

Anonim

Como enviar um formulário usando ng-submit

Os processos de envio de informações em uma página da web são normalmente tratados pelo evento submit no navegador da web. Este evento é normalmente usado para enviar informações que o usuário pode ter inserido em uma página da web para o servidor para processamento posterior, como credenciais de login, dados de formulário, etc. O envio de informações pode ser feito por meio de solicitação GET ou POST.

O AngularJS também fornece uma diretiva chamada ng-submit, que pode ser usada para vincular o aplicativo ao evento submit do navegador. Portanto, no caso do AngularJS, no evento de envio, você pode realizar algum processamento dentro do próprio controlador e, em seguida, exibir as informações processadas para o usuário.

Vamos dar um exemplo de como podemos conseguir isso.

Em nosso exemplo de envio de postagem,

Apresentaremos ao usuário uma caixa de texto na qual ele poderá inserir o tópico que deseja aprender. Haverá um botão de envio na página que, quando pressionado, adicionará o tópico a uma lista não ordenada.

Event Registration

Guru99 Global Event


   Enter which topic you would like to learn
   

    

  • {{topicname}}
    •

Explicação do código:

  1. Estamos declarando primeiro nossa tag HTML de formulário, que conterá o controle "caixa de texto" e "botão enviar". Estamos então usando a diretiva ng-submit para vincular a função "Display ()" ao nosso formulário. Esta função será definida em nosso controlador e será chamada quando o formulário for enviado.
  2. Temos um controle de texto no qual o usuário entrará no Tópico que deseja aprender. Este será vinculado a uma variável chamada 'Tópico' que será usada em nosso controlador.
  3. Existe o botão de envio normal, no qual o usuário clica quando entra no tópico que deseja.
  4. Usamos a diretiva ng-repeat para exibir os itens da lista dos tópicos que o usuário insere. A diretiva ng-repeat passa por cada tópico na matriz 'AllTopic' e exibe o nome do tópico de acordo.
  5. Em nosso controlador, declaramos uma variável de array chamada 'AllTopic'. Isso será usado para conter todos os tópicos inseridos pelo usuário na Etapa 2.
  6. Estamos definindo o código para nossa função Display () que será chamada sempre que o usuário clicar no botão Enviar. Aqui, estamos usando a função push array para adicionar os Tópicos inseridos pelo usuário por meio da variável 'Tópico' em nosso array 'AllTopic'.

Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.

Resultado:

Para ver o código funcionando, primeiro insira um nome de Tópico como "AngularJS" conforme mostrado acima na caixa de texto e clique no botão Enviar.

  • Depois que o botão enviar é clicado, você verá o item que foi inserido na caixa de texto adicionado à lista de itens.
  • Isso está sendo alcançado pela função Display (), que é chamada quando o botão enviar é pressionado.
  • A função Display () adiciona o texto à variável de matriz chamada 'AllTopic'. E nossa diretiva ng-repeat passa por cada valor na variável de array 'AllTopic' e os exibe como itens de lista de acordo.

Resumo

A diretiva "ng-submit" é usada para processar a entrada inserida pelo usuário quando o formulário é enviado.