Formulários AngularJS

O formulário do AngularJS fornece ligação de dados e validação para os controles de entrada.

Controles de entrada

Os controles de entrada são elementos HTML de entrada:

• elemento input
• elemento select
• elemento botão
• elemento textarea

ligação de dados

O controle de entrada usa A diretiva define o controlador da aplicação. A diretiva fornece ligação de dados.

<input type="text" ng-model="firstname">

Agora, o aplicativo tem um nome firstname do atributo.

A diretiva define o controlador da aplicação. A diretiva liga o controle de entrada ao resto do aplicativo.

Atributo firstname，pode ser referenciado no controlador:

Exemplo

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
  $scope.firstname = "Bill";
$scope.reset();
});

</script>

Também pode ser referenciado em outros locais do aplicativo:

Exemplo

<form>
  Nome: <input type="text" ng-model="firstname">
</form>
<h1>Você digitou: {{firstname}}</h1>

</script>

Campo de seleção

O valor do campo de seleção é verdadeiro ou falso。 A diretiva define o controlador da aplicação. A diretiva aplica-se ao campo de seleção e usa seu valor no aplicativo.

Exemplo

Se marcado, o título será mostrado:

<form>
  Marque para mostrar o título:
  <input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">Meu título</h1>

</script>

Botão de rádio

Usar A diretiva define o controlador da aplicação. A diretiva liga o botão de rádio ao seu aplicativo.

Com o mesmo A diretiva define o controlador da aplicação. Os botões de rádio podem ter diferentes valores, mas apenas o valor selecionado será usado.

Exemplo

Mostrar alguns textos com base no valor do botão de rádio selecionado:

<form>
  Escolha um tópico:
  <input type="radio" ng-model="myVar" value="dogs">Cães
  <input type="radio" ng-model="myVar" value="tuts">Tutoriais
  <input type="radio" ng-model="myVar" value="cars">Carros
</form>

</script>

O valor de myVar será dogs,tuts ou cars.

caixa de seleção deslizante

Usar A diretiva define o controlador da aplicação. As instruções vinculam a caixa de seleção deslizante ao seu aplicativo.

A diretiva define o controlador da aplicação. As propriedades definidas nas instruções terão o valor da opção selecionada na caixa de seleção.

Exemplo

Exibir alguns textos com base no valor da opção selecionada:

<form>
  Selecione um tópico:
  <select ng-model="myVar">
    <option value="">
    <option value="dogs">Cães
    <option value="tuts">Tutoriais
    <option value="cars">Carros
  </select>
</form>

</script>

O valor de myVar será dogs,tuts ou cars.

Exemplo de formulário AngularJS

Código da aplicação

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    Nome:<br>
    <input type="text" ng-model="user.firstName"><br>
    Sobrenome:<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">Reiniciar</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: "Bill", lastName: "Gates"};
  $scope.reset = function() {
    $scope.user = angular.copy($scope.master);
  ;
  $scope.reset();
$scope.reset();
});

</script>

Experimente você mesmo novalidate

A propriedade é uma nova propriedade HTML5. Ela desativa qualquer validação padrão do navegador.

Exemplo Explicado ng-app

A diretiva define a aplicação AngularJS. ng-controller

A diretiva define o controlador da aplicação. ng-model

A diretiva liga dois elementos de entrada ao objeto user no modelo. formCtrl master O controlador para reset() Métodos.

reset() O método configura o valor inicial do objeto e define user O objeto é configurado para igual master Objeto.

ng-click A diretiva é chamada apenas ao clicar no botão reset() Métodos.

Este aplicativo não precisa da propriedade novalidate, mas geralmente você o usará no formulário AngularJS para sobrescrever a validação padrão HTML5.