Formas em AngularJS fornece-ligação de dados e validação de controles de entrada.
Controles de entrada
controles de entrada são os elementos de entrada HTML:
- elementos de entrada
- selecione elementos
- elementos de botão
- elementos textarea
Ligação de dados
Controles de entrada fornece dados de ligação utilizando o ng-model directiva.
<input type="text" ng-model="firstname">
A aplicação tem agora uma propriedade chamada firstname .
O ng-model directiva vincula o controlador de entrada para o resto de sua aplicação.
A propriedade firstname , pode ser referido em um controlador:
Exemplo
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl',
function($scope) {
$scope.firstname = "John";
});
</script> Tente você mesmo " Ele também pode ser encaminhado para outro lugar no aplicativo:
Exemplo
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
Tente você mesmo " Caixa de seleção
A caixa de seleção tem o valor true ou false . Aplique o ng-model directiva a uma caixa de seleção, e usá-lo de valor na sua aplicação.
Exemplo
Mostrar o cabeçalho se a caixa está marcada:
<form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My
Header</h1>
Tente você mesmo " Botões do rádio
Botões de rádio ligar-se a sua aplicação com o ng-model directiva.
Os botões de rádio com o mesmo ng-model podem ter valores diferentes, mas apenas a uma sequência seleccionada será usado.
Exemplo
Mostrar algum texto, com base no valor do botão de rádio 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>
Tente você mesmo " O valor de myVar vai ser ou dogs , tuts , ou cars .
selectbox
Vincular caixas de seleção para a sua aplicação com o ng-model directiva.
A propriedade definida no ng-model atributo terá o valor da opção selecionada na selectbox.
Exemplo
Exibir algum texto, com base no valor da opção seleccionada:
<form>
Select a topic:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option
value="cars">Cars
</select>
</form>
Tente você mesmo " O valor de myVar vai ser ou dogs , tuts , ou cars .
Um exemplo de formulário AngularJS
form = {{user}}
master = {{mestre}}
Código de aplicação
<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>
Tente você mesmo "  | O atributo novalidate é novo em HTML5. Ele desativa qualquer validação navegador padrão. |
|---|
exemplo Explicado
A directiva ng-app define a aplicação AngularJS.
A directiva ng-controlador define o controlador de aplicação.
A directiva ng-modelo se liga dois elementos de entrada para o objeto de usuário no modelo.
O controlador formCtrl define valores iniciais para o objeto principal, e define o método reset ().
O método reset () define o objeto de usuário igual ao objeto mestre.
A directiva ng clique invoca o método reset (), apenas se o botão é clicado.
O atributo novalidate não é necessário para esta aplicação, mas normalmente você vai usá-lo em AngularJS formas, para substituir a validação HTML5 padrão.