Formulários AngularJS
Forms em AngularJS fornece vinculação de dados e validação de controles de entrada.
Controles de entrada
Os controles de entrada são os elementos de entrada HTML:
- elementos de entrada
- selecionar elementos
- elementos de botão
- elementos de área de texto
Ligação de dados
Os controles de entrada fornecem vinculação de dados usando a
ng-modeldiretiva.
<input type="text" ng-model="firstname">
O aplicativo agora tem uma propriedade chamada firstname.
A ng-modeldiretiva vincula o controlador de entrada ao restante de seu aplicativo.
A propriedade firstname, pode ser referenciada em um controlador:
Exemplo
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl',
function($scope) {
$scope.firstname = "John";
});
</script>
Também pode ser referido noutra parte do pedido:
Exemplo
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
Caixa de seleção
Uma caixa de seleção tem o valor trueou false. Aplique a
ng-modeldiretiva a uma caixa de seleção e use seu valor em seu aplicativo.
Exemplo
Mostre o cabeçalho se a caixa de seleção estiver marcada:
<form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My
Header</h1>
Botões do rádio
Vincule botões de opção ao seu aplicativo com a ng-model
diretiva.
Botões de opção com o mesmo ng-modelpodem ter valores diferentes, mas apenas o selecionado será usado.
Exemplo
Exiba algum texto, com base no valor do botão de opção selecionado:
<form>
Pick a topic:
<input type="radio" ng-model="myVar"
value="dogs">Dogs
<input type="radio" ng-model="myVar" value="tuts">Tutorials
<input type="radio" ng-model="myVar" value="cars">Cars
</form>
O valor de myVar será dogs, tuts, ou
cars.
Caixa de seleção
Vincule as caixas de seleção ao seu aplicativo com a ng-model
diretiva.
A propriedade definida no ng-modelatributo terá o valor da opção selecionada na caixa de seleção.
Exemplo
Exiba algum texto, com base no valor da opção selecionada:
<form>
Select a topic:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option
value="cars">Cars
</select>
</form>
O valor de myVar será dogs, tuts, ou
cars.
Um exemplo de formulário AngularJS
form = {"firstName":"João","lastName":"Doe"}
master = {"firstName":"John","lastName":"Doe"}
Código do aplicativo
<div ng-app="myApp" ng-controller="formCtrl">
<form
novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last
Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p>form = {{user}}</p>
<p>master = {{master}}</p>
</div>
<script>
var app =
angular.module('myApp', []);
app.controller('formCtrl',
function($scope) {
$scope.master = {firstName: "John", lastName: "Doe"};
$scope.reset = function() {
$scope.user
= angular.copy($scope.master);
};
$scope.reset();
});
</script>
O atributo novalidate é novo no HTML5. Ele desativa qualquer validação de navegador padrão.
Exemplo explicado
A diretiva ng-app define o aplicativo AngularJS.
A diretiva ng-controller define o controlador do aplicativo.
A diretiva ng-model vincula dois elementos de entrada ao objeto de usuário no modelo.
O controlador formCtrl define os valores iniciais para o objeto mestre e define o método reset() .
O método reset() define o objeto de usuário igual ao objeto mestre .
A diretiva ng-click invoca o método reset() , somente se o botão for clicado.
O atributo novalidate não é necessário para esta aplicação, mas normalmente você o usará em formulários AngularJS, para substituir a validação HTML5 padrão.