angular con dinosaurios 7: formularios y ng-model

Empezamos con los formularios en angular

De Kooning

archivado en: JavaScript / 23 noviembre, 2014 / taller:

Angular permite trabajar de forma muy cómoda con formularios y, además, nos facilita mucho el desarrollo gracias al bindeo automático en el modelo mediante la directiva ng-model, la cual se incluye en los tags de entrada de un formulario, es decir, los textarea, los select y los input.

Lo primero que vamos a hacer es un formulario muy sencillo que nos permita añadir dinosaurios a un listado (ver demo en Plunker). En el index.html pondremos el formulario y a continuación un div donde mostraremos en tiempo real el nombre que se está escribiendo en el input gracias a la directiva ng-model, que conecta esa variable con el controlador, que a su vez está conectada con la vista. Además, añadiremos una función en un botón, que nos servirá de submit. Algo así:

<body ng-app="demoFormulario">

<section ng-controller="controladorFormulario">

<form name="indexaDinosaurios">

<input type="text" name="nombreDinosaurio" ng-model="addDinosaurioNombre">

<button ng-click="addDinosaurio(addDinosaurioNombre)">guardar</button>

</form>

<div>Vas a añadir el dinosaurio {{addDinosaurioNombre}}</div>

<h5>Dinosaurios</h5>

<ul ng-repeat="item in dinosaurios">

<li>{{item.nombre}}</li>

</ul>

</section>

<!-- Enlazamos angular en el footer para que no se detenga la carga inicial y el usuario vea enseguida algo -->

<script src="js/vendor/angular.min.js"></script>

<script src="js/app.js"></script>

<script src="js/controllers.js"></script>

</body>

En nuestro módulo principal, app.js, pondremos una factoría con un par de dinosaurios:

'use strict';

var moduloDemoFormulario = angular.module('demoFormulario', []);

moduloDemoFormulario.factory('listaDinosaurios', function() {

this.dinosaurios = [{'nombre': 'estegosaurio'}, {'nombre':'triceratops'}];

return this.dinosaurios;

});

Y en controllers.js, además de recoger y enviar tanto el listado de dinosaurios, como el input del formulario, ponemos una función que añada al listado el que se envíe del formulario.

'use strict';

moduloDemoFormulario.controller("controladorFormulario", function($scope, listaDinosaurios) {

$scope.dinosaurios = listaDinosaurios;

$scope.addDinosaurioNombre = "";

$scope.addDinosaurio = function(dinosaurio) {

listaDinosaurios.push({'nombre':dinosaurio});

}

});

ng-submit

Dos ideas más antes de terminar esta entrada.

Una, en lugar de llamar a una función con ng-click para guardar el formulario, podíamos haber utilizado el evento ngSubmit(), pero ojo, o el uno o el otro, pero no los dos al mismo tiempo :P.

index.html

<form name="otroFormulario" ng-submit="funcionRecogeFormulario()" ng-controller="otroControlador">

<input type="text" name="soyUnCampo" ng-model="soyUnCampo">

<input type="submit">

</form>

controllers.js

moduloDemoFormulario.controller("otroControlador", function($scope) {

$scope.funcionRecogeFormulario = function() {

var campo = $scope.soyUnCampo;

}

});

Y dos, en lugar de ir definiendo cada punto de entrada por separado, puede resultar cómodo agruparlos todo en un objeto. Algo así:

 

<form name="otroFormulario" ng-submit="funcionRecogeFormulario()" ng-controller="otroControlador" ng-model="miFormulario">

<input type="text" name="soyUnCampo" ng-model="miFormulario.soyUnCampo">

<input type="text" name="soyOtroCampo" ng-model="miFormulario.soyOtroCampo">

<input type="submit" id="submit">

</form>

controllers.js

moduloDemoFormulario.controller("otroControlador", function($scope) {

$scope.miFormulario = {};

$scope.funcionRecogeFormulario = function() {

var datosFormulario = $scope.miFormulario;

var campo = datosFormulario.soyUnCampo;

var otroCampo = datosFormulario.soyOtroCampo;

}

});

Bueno, espero que hasta aquí esté claro... en la siguiente entrada seguiremos viendo que nos ofrece angular para trabajar con formularios.

|| Tags: ,

valoración de los lectores sobre angular con dinosaurios 7: formularios y ng-model

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • estrellica valoración negativa
  • 2.5 sobre 5 (4 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Una respuesta a “angular con dinosaurios 7: formularios y ng-model

  1. Eric Torres Andrade el dijo:

    Si hice un crud y luego copio y pego para modificar ese mismo crud es decir serian dos cruds muy similares exceptuando los campos, cómo hago para que esos dos crud’s puedan aparecer sin pelearse? uso php, mysqli, angular y ajax