Formularios AngularJS
Los formularios en AngularJS proporcionan vinculación de datos y validación de controles de entrada.
Controles de entrada
Los controles de entrada son los elementos de entrada HTML:
- elementos de entrada
- seleccionar elementos
- elementos de botón
- elementos de área de texto
El enlace de datos
Los controles de entrada proporcionan enlace de datos mediante el uso de la
ng-modeldirectiva.
<input type="text" ng-model="firstname">
La aplicación ahora tiene una propiedad llamada firstname.
La ng-modeldirectiva vincula el controlador de entrada al resto de su aplicación.
Se firstnamepuede hacer referencia a la propiedad en un controlador:
Ejemplo
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl',
function($scope) {
$scope.firstname = "John";
});
</script>
También se puede hacer referencia a ella en otra parte de la solicitud:
Ejemplo
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
Caja
Una casilla de verificación tiene el valor trueo false. Aplique la
ng-modeldirectiva a una casilla de verificación y use su valor en su aplicación.
Ejemplo
Mostrar el encabezado si la casilla de verificación está marcada:
<form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My
Header</h1>
Botones de radio
Enlace los botones de radio a su aplicación con la ng-model
directiva.
Los botones de radio con el mismo ng-modelpueden tener diferentes valores, pero solo se utilizará el seleccionado.
Ejemplo
Muestra algo de texto, basado en el valor del botón de radio seleccionado:
<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>
El valor de myVar será dogs, tutso
cars.
Cuadro de selección
Vincule los cuadros de selección a su aplicación con la ng-model
directiva.
La propiedad definida en el ng-modelatributo tendrá el valor de la opción seleccionada en el cuadro de selección.
Ejemplo
Muestra algo de texto, basado en el valor de la opción 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>
El valor de myVar será dogs, tutso
cars.
Un ejemplo de formulario AngularJS
formulario = {"nombre":"Juan","apellido":"Doe"}
maestro = {"nombre":"Juan","apellido":"Doe"}
Código de 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>
El atributo novalidate es nuevo en HTML5. Deshabilita cualquier validación predeterminada del navegador.
Ejemplo explicado
La directiva ng-app define la aplicación AngularJS.
La directiva ng-controller define el controlador de la aplicación.
La directiva ng-model vincula dos elementos de entrada al objeto de usuario en el modelo.
El controlador formCtrl establece valores iniciales para el objeto maestro y define el método reset() .
El método reset() establece el objeto de usuario igual al objeto maestro .
La directiva ng-click invoca el método reset() , solo si se hace clic en el botón.
El atributo novalidate no es necesario para esta aplicación, pero normalmente lo usará en formularios AngularJS para anular la validación HTML5 estándar.