Formularios AngularJS

AngularJS proporciona la asociación de datos y la validación de controles de entrada en los formularios.

Controles de entrada

Los controles de entrada son elementos HTML de entrada:

• elemento input
• elemento select
• elemento button
• elemento textarea

Asociación de datos

El controlador de entrada a través de La directiva define el controlador de aplicación. La instrucción proporciona la asociación de datos.

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

Ahora, la aplicación tiene un nombre firstname .Atributos.

La directiva define el controlador de aplicación. La instrucción vincula el controlador de entrada con el resto de la aplicación.

Atributo firstnamePuede ser referenciado en el controlador:

Ejemplo

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

</script>

También se puede referenciar en otras partes de la aplicación:

Ejemplo

<form>
  Nombre: <input type="text" ng-model="firstname">
</form>
<h1>Usted ha ingresado: {{firstname}}</h1>

</script>

Casilla de verificación

El valor de la casilla de verificación es true o false.Asignar La directiva define el controlador de aplicación. La instrucción se aplica a la casilla de verificación y se utiliza su valor en su aplicación.

Ejemplo

Si selecciona la casilla de verificación, se mostrará el título:

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

</script>

Botones de opción

Usar La directiva define el controlador de aplicación. La instrucción vincula los botones de opción a su aplicación.

Con el mismo La directiva define el controlador de aplicación. Los botones de opción pueden tener diferentes valores, pero solo se usará el valor seleccionado.

Ejemplo

Muestre algunos textos según el valor del botón de opción seleccionado:

<form>
  Elija un tema:
  <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>

</script>

El valor de myVar será dogs、tuts o cars。

caja desplegable

Usar La directiva define el controlador de aplicación. La directiva binding de la caja desplegable a su aplicación.

La directiva define el controlador de aplicación. Las propiedades definidas en la propiedad tendrán el valor de la opción seleccionada en el cuadro de selección.

Ejemplo

Muestre algunos textos según el valor seleccionado de la opción:

<form>
  Seleccione un tema:
  <select ng-model="myVar">
    <option value="">
    <option value="dogs">Perros
    <option value="tuts">Tutoriales
    <option value="cars">Cars
  </select>
</form>

</script>

El valor de myVar será dogs、tuts o cars。

AngularJS 表单示例

应用程序代码

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

</script>

Pruebe personalmente novalidate

La propiedad es una nueva propiedad en HTML5. Deshabilita cualquier validación de navegador predeterminada.

Explicación de ejemplo ng-app

La directiva define la aplicación AngularJS. ng-controller

La directiva define el controlador de aplicación. ng-model

La directiva vincula dos elementos de entrada a la propiedad user del modelo. formCtrl master El controlador para reset() Métodos.

reset() El método establece el valor inicial del objeto y define user El objeto se establece en igual a master Objeto.

ng-click La directiva se llama solo al hacer clic en el botón reset() Métodos.

Esta aplicación no requiere la propiedad novalidate, pero generalmente se utiliza en formularios AngularJS para sobrescribir la validación estándar HTML5.