ng-submit no AngularJS: Lidando com o envio de formulários com exemplos

Por: James Hartmann James Hartmann
Hours Atualização do

⚡ Resumo Inteligente

Em AngularJS, o ng-submit vincula uma função do controlador ao evento de envio de formulário do navegador, de forma que os valores inseridos sejam processados ​​dentro do controlador e a página nunca seja recarregada por meio de um POST padrão.

  • 🔘 Função diretiva: ng-submit associa uma expressão AngularJS ao evento de envio de um elemento de formulário.
  • ☑️ Sem recarregamento da página: O método POST padrão do navegador é suprimido, a menos que o formulário contenha um atributo de ação.
  • ✅ Exemplo resolvido: Uma caixa de texto combinada com Display() adiciona cada tópico ao array AllTopic para ng-repeat.
  • 🧪 Portal de validação: A combinação de `$valid` com `novalidate` e `ng-disabled` impede o envio de dados incompletos.
  • 🛠️ Erro comum: A associação do comando ng-click ao botão de envio ao lado de ng-submit causa o envio duplicado do código.
  • 📊 Nota de versão: O suporte ao AngularJS terminou em janeiro de 2022; o Angular moderno submete os dados através do ngSubmit.
Saiba Mais

A diretiva ng-submit no AngularJS vincula um evento de envio de formulário a uma função do controlador.

Diretiva AngularJS ng-submit

O ng-enviar A diretiva em AngularJS é usada para vincular o aplicativo ao evento de envio do navegador. Então no caso de AngularJS no evento submit, você pode realizar algum processamento dentro do próprio controlador e depois exibir as informações processadas ao usuário.

Nota de versão: O AngularJS 1.x deixou de ter suporte de longo prazo em 31 de dezembro de 2021, e a equipe do framework confirma isso. O suporte ao AngularJS foi oficialmente encerrado. Em janeiro de 2022, portanto, não haverá lançamentos ou correções de segurança subsequentes. Cada etapa e bloco de código abaixo é mantido exatamente como foi escrito, como referência histórica. Novos trabalhos pertencem ao Angular moderno, que expressa a mesma ideia que (ngSubmit) vinculado a um FormGroup.

Como enviar um formulário em AngularJS usando ng-submit

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

Vamos dar um exemplo de envio de formulário Angular para ver como enviar formulários em AngularJS.

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

A ilustração abaixo traces que fluem, desde o tópico digitado na caixa de texto, passando pelo botão Enviar, até o item da lista adicionado abaixo.

Formulário AngularJS com uma caixa de texto para tópicos, um botão "Enviar" e a lista não ordenada resultante de tópicos.
Enviando um formulário em AngularJS usando ng-submit

Exemplo de envio de formulário AngularJS

Agora, veremos um exemplo de envio de formulário AngularJS do Controller usando a diretiva 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>

Code Explicação:

  1. Primeiramente, declaramos a tag HTML do formulário, que conterá o campo de texto e o botão de envio, conforme mostrado no exemplo de evento de envio de formulário do Angular. Em seguida, utilizamos a diretiva ng-submit do AngularJS para associar a função "Display()" ao nosso formulário. Essa 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 irá inserir o Tópico que deseja aprender. Isto estará vinculado a uma variável chamada 'Topic' que será usada em nosso controlador.
  3. Existe o botão de envio normal no AngularJS no qual o usuário clicará quando inserir o tópico desejado.
  4. Nós usamos o ng-repetir diretiva para exibir itens de lista dos tópicos que o usuário insere. A diretiva ng-repeat percorre cada tópico na matriz 'AllTopic' e exibe o nome do tópico de acordo.
  5. Em nosso controlador, estamos declarando uma variável de array chamada 'AllTopic'. Ela será usada para armazenar 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 'Topic' em nosso array 'AllTopic'.

Se o código de exemplo do formulário AngularJS for executado com sucesso, a seguinte saída será mostrada quando você executar seu código no navegador.
Saída:

Saída do navegador do exemplo ng-submit do AngularJS mostrando a caixa de texto do tópico vazia e o botão Enviar.

Para ver o código funcionando, primeiro insira um nome de tópico como “Angular” conforme mostrado acima na caixa de texto e depois clique no botão Enviar.

Saída do ng-submit do AngularJS após clicar em Enviar, com o tópico inserido adicionado à lista.

  • Após clicar no botão enviar, você verá o item que foi inserido na caixa de texto adicionado à lista de itens.
  • Isso está sendo conseguido pela função Display(), que é chamada quando o botão enviar é pressionado.
  • A função Display() adiciona o texto à variável de array 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.

ARTIGOS RELACIONADOS

ng-submit vs ng-click: qual usar

Ambos Diretivas do AngularJS Podem chamar a mesma função do controlador, mas escutam eventos diferentes do navegador. ng-submit senta no <form> A tag reage ao evento de envio, portanto, também é acionada quando um usuário pressiona Enter dentro de um campo. ng-click Fica posicionado sobre um botão e reage apenas a um clique do mouse ou a uma ativação equivalente.

Aspecto ng-enviar ng-clique
Elemento hospedeiro A tag de formulário Qualquer elemento clicável
Evento ouvido Enviar, incluindo a tecla Enter. clique apenas
Navegador padrão POST Suprimido pela diretiva Ainda dispara a partir de um botão de envio
Acesso ao estado do formulário Lê $valid e $invalid no controlador do formulário. Sem contexto formal próprio
Ajuste natural Entregar dados de formulário a um controlador Botões da barra de ferramentas, links, gatilhos modais

O suporte para teclado geralmente define a escolha. Um formulário com fio com ng-click O recurso sozinho ignora a tecla Enter, o que frustra os usuários que preenchem um campo de login. Reserve ng-click Para ações que não sejam envios de formulário, como limpar um campo ou abrir uma caixa de diálogo.

Por que o ng-submit impede o envio padrão do navegador?

Um formulário HTML simples reage a um evento de envio serializando seus campos e solicitando ao navegador que carregue uma nova página, que descarta todos os valores armazenados. $scope. O ng-submit A diretiva impede que isso aconteça: ela chama preventDefault() Para você, a expressão é executada e a página atual permanece no lugar. Não. $event Argumentos e nenhuma chamada manual são necessários.

A supressão tem uma condição documentada. De acordo com o ngSubmit referênciaA ação padrão é impedida apenas enquanto o formulário não contiver nenhum campo. action, data-action or x-action Adicione qualquer um desses atributos e o navegador navegará normalmente após a conclusão do manipulador, o que é o comportamento correto para um formulário renderizado progressivamente no servidor e uma surpresa em todos os outros casos.

Como a diretiva absorve o objeto de evento, leia os valores enviados das propriedades que modelo ng escreveu no escopo ou passou-os explicitamente, como em ng-submit="Display(Topic)".

Como validar um formulário antes da execução do ng-submit

O exemplo acima aceita um tópico vazio, porque nada verifica a caixa de texto primeiro. O AngularJS cria um controlador de formulário para cada formulário nomeado, e esse controlador expõe os sinalizadores necessários para controlar o envio. novalidate assim o navegador deixa suas próprias bolhas HTML5 desativadas e o AngularJS validação de formulário assume.

  1. Dê o formulário a nameO AngularJS publica um controlador com esse nome no ambiente ao redor. controlador escopo.
  2. Adicione novalidate para a tag de formulário, de forma que a validação nativa do navegador não interfira.
  3. Marque os campos, usando required, ng-minlength, ng-maxlength or ng-pattern.
  4. Proteja o tratador com $validE passe o controlador do formulário como argumento para que a função possa inspecionar os campos individualmente.
  5. Desative o botão com ng-disabled apontando para $invalid, que fornece feedback visual imediato.
<form name="topicForm" ng-submit="topicForm.$valid && Display(topicForm)" novalidate>
    <input type="text" name="Topic" ng-model="Topic" required>
    <input type="submit" value="Submit" ng-disabled="topicForm.$invalid">
</form>

A maioria dos problemas relatados com esse padrão envolve dois erros:

  • Double submissão. Confeção ng-click no botão de envio enquanto ng-submit O formulário executa o manipulador duas vezes, uma vez por evento. A documentação oficial alerta contra a combinação dos dois manipuladores, portanto, escolha apenas um.
  • Envios inesperados. Qualquer botão dentro de um formulário sem type="button" Aciona o evento de envio. Marque explicitamente os botões de cancelar e redefinir; caso contrário, eles também acionarão o manipulador.

Guardando em $valid É uma conveniência, não um controle de segurança. Os valores ainda precisam ser revalidados no servidor antes de serem armazenados.

Perguntas Frequentes

Sim. Um formulário que contém um campo de entrada ou um botão do tipo "submit" dispara o evento de envio quando a tecla Enter é pressionada dentro do campo, portanto a expressão ng-submit é executada sem nenhum manipulador de tecla adicional.

Não. Somente os elementos de formulário disparam o evento de envio que a diretiva está monitorando. Mova o ng-submit para a tag do formulário ou adicione o ng-click ao elemento ao qual você realmente deseja reagir.

ng-submit não passa argumentos. Leia as propriedades de escopo que ng-model preencheu ou passe-as explicitamente, por exemplo, ng-submit=”Display(Topic)” ou ng-submit=”Display(topicForm)”.

Sim. Cada elemento do formulário tem seu próprio controlador de formulário, então dê a cada formulário um nome exclusivo e vincule um manipulador separado. Compartilhar uma função entre formulários pode causar conflitos de escopo.

O manipulador dispara de qualquer maneira, mas um campo sem modelo ng O valor nunca é gravado em `$scope`, portanto a função não consegue lê-lo. Vincule todas as entradas que você pretende processar.

Compile o formulário em um ambiente de teste, defina o valor do modelo no escopo, dispare um evento de submissão e, em seguida, verifique o array ou a chamada de serviço produzida pelo manipulador. Karma com Jasmine continua sendo a combinação usual.

Os modelos de linguagem leem o formato do modelo e o rascunho necessário, os atributos ng-pattern e ng-minlength, além das mensagens correspondentes, o que torna o AngularJS muito mais eficiente. validação de formulário incorporar isso em uma etapa de revisão.

Copiloto do GitHub O modo agente reescreve um modelo em (ngSubmit) com FormGroup e cria a estrutura da classe do componente, mas os validadores e as chamadas assíncronas geradas ainda precisam de revisão humana e testes.

Resuma esta postagem com: