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.
