Formas en AngularJS proporciona datos de unión y validación de controles de entrada.
Controles de entrada
Los controles de entrada son los elementos de entrada HTML:
- elementos de entrada
- elementos seleccionados
- elementos del botón
- elementos de área de texto
El enlace de datos
Los controles de entrada de datos proporciona vinculante mediante el uso de la ng-model Directiva.
<input type="text" ng-model="firstname">
La aplicación tiene ahora una propiedad denominada firstname .
El ng-model directiva se une el controlador de entrada al resto de la aplicación.
La propiedad firstname , se puede hacer referencia a un controlador en:
Ejemplo
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl',
function($scope) {
$scope.firstname = "John";
});
</script> Inténtalo tú mismo " También puede hacer referencia a la aplicación en otra parte:
Ejemplo
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
Inténtalo tú mismo " Caja
Una casilla de verificación tiene el valor true o false . Aplicar el ng-model directiva para una casilla de verificación, y utilizarlo de valor en su aplicación.
Ejemplo
Mostrar el encabezado si se marca la casilla de verificación:
<form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My
Header</h1>
Inténtalo tú mismo " Botones de radio
Botones de radio se unen a su aplicación con el ng-model Directiva.
Los botones de radio con el mismo ng-model pueden tener valores diferentes, pero se utiliza sólo el seleccionado.
Ejemplo
Mostrar algún texto, basado en el valor del botón de opción 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>
Inténtalo tú mismo " El valor de myVar será ya sea dogs , tuts , o cars .
selectbox
Obligar a cuadros de selección para su aplicación con el ng-model Directiva.
La propiedad definida en el ng-model atributo tendrá el valor de la opción seleccionada en la caja de selección.
Ejemplo
Mostrar un 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>
Inténtalo tú mismo " El valor de myVar será ya sea dogs , tuts , o cars .
Observemos un ejemplo AngularJS
form = {{usuario}}
master = {{}} maestro
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>
Inténtalo tú mismo "  | El atributo novalidate es nuevo en HTML5. Se desactiva la validación de cualquier navegador predeterminado. |
|---|
ejemplo Explicación
La directiva ng aplicación define la aplicación AngularJS.
La directiva ng-controlador define el controlador de la aplicación.
La directiva ng-modelo une dos elementos de entrada para el objeto de usuario en el modelo.
El controlador formCtrl establece los valores iniciales para el objeto principal, y define el método de reset ().
El método de reset () establece el objeto de usuario igual que el objeto principal.
La directiva ng clic con el botón invoca el método reset (), sólo si se hace clic en el botón.
El atributo novalidate no es necesaria para esta aplicación, pero normalmente se usará en formas AngularJS, para anular la validación HTML5 estándar.