AngularJS - Forms

Podemos usar ng-click para lidar com cliques e usar as flags $dirty e $invalid para fazer as validações de forma perfeita. Use novalidate com uma declaração no formulário para desativar qualquer validação específica do browser. Os formulários fazem uso pesado de eventos AngularJS. Agora vamos uma rápida "bisoiada" nestes eventos.

Eventos

O AngularJS fornece vários eventos que podem ser vinculados ao HTML. Por exemplo, ng-click é normalmente vinculado com botões.

• ng-click
• ng-dbl-click
• ng-mousedown
• ng-mouseup
• ng-mouseenter
• ng-mouseleave
• ng-mousemove
• ng-mouseover
• ng-keydown
• ng-keyup
• ng-keypress
• ng-change

ng-click

Limpa os dados de um formulário usando a diretiva onclick em um botão.

<input name = "firstname" type = "text" ng-model = "firstName" required>
<input name = "lastname" type = "text" ng-model = "lastName" required>
<input name = "email" type = "email" ng-model = "email" required>
<button ng-click = "reset()">Reset</button>

<script>
   function studentController($scope) { 
      $scope.reset = function(){
         $scope.firstName = "Mahesh";
         $scope.lastName = "Parashar";
         $scope.email = "MaheshParashar@tutorialspoint.com";
      }   
      
      $scope.reset();
   }
</script>

ng-dbl-click

Permite especificar o comportamento personalizado em um evento dblclick.

<button ng-dblclick="count = count + 1" ng-init="count=0">
  Increment (on double click)
</button>
count: {{count}}

ng-mousedown

Permite especificar o comportamento personalizado no evento mousedown. No exemplo, clicando.

<button ng-mousedown="count = count + 1" ng-init="count=0">
  Increment (on mouse down)
</button>
count: {{count}}

ng-mouseup

Permite especificar o comportamento personalizado no evento mouseup. No exemplo, clicando.

<button ng-mouseup="count = count + 1" ng-init="count=0">
  Increment (on mouse up)
</button>
count: {{count}}

ng-mouseenter

Permite especificar o comportamento personalizado no evento mouseenter. No exemplo, passando o mouse sobre o botão.

<button ng-mouseenter="count = count + 1" ng-init="count=0">
  Increment (when mouse enters)
</button>
count: {{count}}

ng-mouseleave

Permite especificar o comportamento personalizado no evento mouseleave. No exemplo, bote o mouse sobre o botão e depois tire.

<button ng-mouseleave="count = count + 1" ng-init="count=0">
  Increment (when mouse leaves)
</button>
count: {{count}}

ng-mousemove

Permite especificar o comportamento personalizado no evento mousemove. No exemplo, enquanto o mouse se move sobre o botão o contador é incrementado.

<button ng-mousemove="count = count + 1" ng-init="count=0">
  Increment (when mouse moves)
</button>
count: {{count}}

ng-mouseover

Permite especificar o comportamento personalizado no evento mouseover. No exemplo, bote o mouse sobre o botão e o contador será incrementado.

<button ng-mouseover="count = count + 1" ng-init="count=0">
  Increment (when mouse is over)
</button>
count: {{count}}

ng-keydown

Faz a contagem da quantidade de caracteres na caixa de texto.

<input ng-keydown="count = count + 1" ng-init="count=0">
key down count: {{count}}

ng-keyup

Faz a contagem da quantidade de caracteres na caixa de texto e na outra caixa mostra o código do caractere digitado.

<p>Typing in the input box below updates the key count</p>
<input ng-keyup="count = count + 1" ng-init="count=0"> key up count: {{count}}

<p>Typing in the input box below updates the keycode</p>
<input ng-keyup="event=$event">
<p>event keyCode: {{ event.keyCode }}</p>
<p>event altKey: {{ event.altKey }}</p>

ng-keypress

Faz a contagem da quantidade de caracteres na caixa de texto. Mesmo apagando o contador é incrementado.

<input ng-keypress="count = count + 1" ng-init="count=0">
key press count: {{count}}

ng-change

Avaliar a expressão dada quando o usuário altera a entrada. A expressão é avaliada imediatamente, ao contrário do evento onchange do JavaScript que só age no final de uma alteração (normalmente, quando o utilizador deixa o elemento de forma ou pressiona a tecla de retorno).

<script>
  angular.module('changeExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.counter = 0;
      $scope.change = function() {
        $scope.counter++;
      };
    }]);
</script>
<div ng-controller="ExampleController">
  <input type="checkbox" ng-model="confirmed" ng-change="change()" id="ng-change-example1" />
  <input type="checkbox" ng-model="confirmed" id="ng-change-example2" />
  <label for="ng-change-example2">Confirmed</label><br />
  <tt>debug = {{confirmed}}</tt><br/>
  <tt>counter = {{counter}}</tt><br/>
</div>

Validate Data

$dirt- confirma que o valor foi alterado.

$invalid - confirma que o valor digitado é inválido.

$error - confirma o erro exato.