Validação de formulário AngularJS no envio: formulário com exemplo

Enviar var app = angular.module ('DemoApp', ['jcs-autoValidate', 'angular-ladda']); app.controller ('DemoController', function ($ scope) {$ scope.submitting = false; $ scope.submit = function () {$ scope.submitting = true;}});

Explicação do código:

  1. Estamos usando a diretiva 'ng-submit' para chamar uma função chamada 'submit'. Esta função será usada para alterar o atributo ladda do botão enviar.
  2. O atributo ladda é um atributo especial da estrutura ladda. É este atributo que adiciona o efeito de rotação ao controle. Estamos definindo o valor do atributo ladda para a variável submetendo.
  3. A propriedade data-style é novamente um atributo adicional oferecido pela estrutura ladda, que apenas adiciona um efeito visual diferente ao botão enviar.
  4. O módulo 'AngularJS-ladda' precisa ser adicionado ao aplicativo AngularJS.JS para que a estrutura ladda funcione.
  5. Inicialmente, estamos definindo e configurando o valor de uma variável chamada 'submetendo' como falso. Este valor é definido para o atributo ladda do botão de envio. Ao definir inicialmente como falso, estamos dizendo que não queremos que o botão enviar tenha o efeito ladda ainda.
  6. Estamos declarando uma função que é chamada quando o botão enviar é pressionado. Nesta função, estamos definindo o 'envio' como verdadeiro. Isso fará com que o efeito ladda seja aplicado ao botão enviar.

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

Saída:

Quando o formulário é inicialmente exibido, o botão de envio é mostrado em seu formulário simples.

Quando o botão de envio é pressionado, a variável de envio no controlador é definida como verdadeira. Este valor é passado para o atributo 'ladda' do botão enviar, o que causa o efeito de rotação do botão.

Resumo

  • A validação dos controles HTML da caixa de texto pode ser feita usando o atributo 'obrigatório'.
  • No HTML5, novos controles foram adicionados, como senha, e-mail e número, que fornecem seu próprio conjunto de validações.
  • A validação do formulário no AngularJS é feita observando-se os valores $ dirty, $ valid, $ invalid e $ pristine de um controle de formulário.
  • A validação automática em aplicativos AngularJS também pode ser obtida usando o módulo de validação automática JCS.
  • Os botões Ladda podem ser adicionados a um aplicativo Angular.js para dar um toque visual aprimorado ao usuário quando o botão é pressionado.