AngularJS Formulario

Los formularios de AngularJS son colecciones de controles de entrada.

Controles HTML

Los siguientes elementos input HTML se denominan controles HTML:

  • Elemento input
  • Elemento select
  • Elemento button
  • Elemento textarea

Enlace de datos

Los controles input utilizan la directiva ng-model para lograr el enlace de datos.

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

Con el código anterior, la aplicación tiene una propiedad llamada firstname.

Se vincula a su aplicación mediante la directiva ng-model.

La propiedad firstname se puede usar en el controller:

Ejemplo

var app = angular.module('myApp', []); app.controller('formCtrl', function($scope) { $scope.firstname = "John"; });

Pruébalo »

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

Ejemplo

<form> First Name: <input type="text" ng-model="firstname"> </form> <h1>You entered: {{firstname}}</h1>

Pruébalo »

Checkbox (casilla de verificación)

El valor de un checkbox es true o false, se puede vincular con la directiva ng-model, y su valor se puede usar en la aplicación:

Ejemplo

Cuando se marca la casilla, se muestra el contenido de la etiqueta h1:

<form> Check to show a header: <input type="checkbox" ng-model="myVar"> </form> <h1 ng-show="myVar">My Header</h1>

Pruébalo »

Botones de opción

Podemos usar ng-model para vincular botones de opción a su aplicación.

Los botones de opción usan el mismo ng-model, pueden tener diferentes valores, pero solo se utiliza el valor del botón de opción seleccionado.

Ejemplo

Muestra información según el botón de opción seleccionado:

<form>Selecciona una opción:<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>

Pruébalo »

El valor de myVar puede ser dogs, tuts o cars.

Menú desplegable

Puedes vincular el menú desplegable a tu aplicación usando la directiva ng-model.

El valor del atributo ng-model es la opción que seleccionas en el menú desplegable:

Ejemplo

Muestra información según la opción seleccionada del menú desplegable:

<form>Selecciona una opción:<select ng-model="myVar"> <option value=""> <option value="dogs">Dogs <option value="tuts">Tutorials <option value="cars">Cars </select> </form>

Pruébalo »

El valor de myVar puede ser dogs, tuts o cars.

Formularios HTML

Los formularios HTML suelen existir junto con los controles HTML.

Ejemplo de formulario AngularJS

First Name:

Last Name:


form = {{user}}

master = {{master}}

Código de la aplicación

<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>

Pruébalo »
Note novalidateEl atributo es nuevo en HTML5. Deshabilita la validación predeterminada del navegador.

Análisis del ejemplo

ng-appLa directiva define la aplicación AngularJS.

ng-controllerLa directiva define el controlador de la aplicación.

ng-modelLa directiva vincula dos elementos input al userobjeto.

formCtrlLa función establecemasterel valor inicial del objeto, y definereset()el método.

reset()El método establece eluserobjeto igual almasterobjeto.

ng-clickLa directiva llama alreset()método, y se llama al hacer clic en el botón.

El atributo novalidate no es obligatorio en la aplicación, pero es necesario usarlo en formularios AngularJS para anular la validación estándar de HTML5.

Otras extensiones