¡Esta es una revisión vieja del documento!


Tabla de Contenidos

2.4 Formulario

Ahora que ya tenemos un conocimiento inicial de angular y ya podemos empezar a hacer un pequeño ejemplo funcional.El objetivo de este tema es crear un formulario de entrada de datos de un hipotético seguro médico.

Modelo

Ya hemos visto la importancia del modelo de datos para AngularJS así que vamos a definir nuestro modelo del ejemplo del seguro médico:

PlantUML Graph

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body ng-controller="SeguroController">
    <form>
      <fieldset>
        <legend>Seguro Médico</legend>
          <label for="nif">NIF:</label><input id="nif" name="nif" type="text" ng-model="seguro.nif" /><br>
          <label for="nombre">Nombre:</label><input id="nombre" name="nombre" type="text" ng-model="seguro.nombre" /><br>
          <label for="ape1">1º Apellido:</label><input id="ape1" name="ape1" type="text" ng-model="seguro.ape1" /><br>
          <label for="edad">Edad:</label><input id="edad" name="edad" type="text" ng-model="seguro.edad" /><br>
          <label for="sexo">Sexo:</label><select id="sexo" name="sexo" type="checkbox" ng-model="seguro.sexo" ><option value="">--Elige opcion--</option><option value="H">Hombre</option><option value="M">Mujer</option></select><br>
          <label for="casado">Casado:</label><input id="casado" name="casado" type="checkbox" ng-model="seguro.casado" /><br>
          <label for="numHijos">Nº Hijos:</label><input id="numHijos" name="numHijos" type="text" ng-model="seguro.numHijos" /><br>
          <label for="embarazada">Embarazada:</label><input id="embarazada" name="embarazada" type="checkbox" ng-model="seguro.embarazada" /><br>
          <label for="fechaCreacion">Fecha de creaci&oacute;n:</label><input id="fechaCreacion" name="fechaCreacion" type="text" ng-model="seguro.fechaCreacion" /><br>
      </fieldset>
      <fieldset>
        <legend>Coberturas</legend>
          <label for="embarazada">Embarazada:</label><input id="embarazada" name="embarazada" type="checkbox" ng-model="seguro.embarazada" /><br>
          <label for="oftalmologia">Oftalmologia:</label><input id="oftalmologia" name="oftalmologia" type="checkbox" ng-model="seguro.coberturas.oftalmologia" /><br>
          <label for="dental">Dental:</label><input id="dental" name="dental" type="checkbox" ng-model="seguro.coberturas.dental" /><br>
          <label for="fecundacionInVitro">Fecundacion In Vitro:</label><input id="fecundacionInVitro" name="fecundacionInVitro" type="checkbox" ng-model="seguro.coberturas.fecundacionInVitro" /><br>
      </fieldset>      
      <fieldset>
      <legend>Enfermedades</legend>
          <label for="corazon">Corazon:</label><input id="corazon" name="corazon" type="checkbox" ng-model="seguro.enfermedades.corazon" /><br>
          <label for="estomacal">Estomacal:</label><input id="estomacal" name="estomacal" type="checkbox" ng-model="seguro.enfermedades.estomacal" /><br>
          <label for="rinyones">Ri&ntilde;ones:</label><input id="rinyones" name="rinyones" type="checkbox" ng-model="seguro.enfermedades.rinyones" /><br>
          <label for="alergia">Alergia:</label><input id="alergia" name="alergia" type="checkbox" ng-model="seguro.enfermedades.alergia" /><br>
          <label for="nombreAlergia">Nombre de la alergia:</label><input id="nombreAlergia" name="nombreAlergia" type="text" ng-model="seguro.enfermedades.nombreAlergia" /><br>
      </fieldset> 
    </form>
  </body>
</html>

  • Línea 15: Se puede ver como hemos usado el tag <select> en vez de un <input>. AngularJS reconoce perfectamente el tag <select> y no hay que hacer nada especial con él 1). Lo que aparece en el atributo value de los tag <option> es lo que se guardará como valor en JavaScript. En este caso los valores son “H” y “M”.
  • Línea 16: Al igual que con el <option> ahora hacemos uso de un tag <input> del tipo checkbox. Si lo marcamos en JavaScript se guardará un true y si lo desmarcamos se guardará un false. Es decir que no hace falta hacer nada especial para usar un booleano.

* Línea 19: Vemos como la fecha se muestra en formato inglés. Este problema ya lo arreglaremos mas adelante ya que el tratamiento de fechas no es sencillo.

var app=angular.module("app",[]);
 
function SeguroController($scope) {
  $scope.seguro={
    nif:"",
    nombre:"",
    ape1:"",
    edad:undefined,
    sexo:"",
    casado:false,
    numHijos:undefined,
    embarazada:false,
    coberturas: {
      oftalmologia:false,
      dental:false,
      fecundacionInVitro:false
    },
    enfermedades:{
      corazon:false,
      estomacal:false,
      rinyones:false,
      alergia:false,
      nombreAlergia:""
    },
    fechaCreacion:new Date()
  }
}

  • Línea 4: Lo mas importante aquí es que todas las propiedades de nuestro modelo no está ne el $scope sino que creamos un nuevo objeto con las propiedades de nuestro modelo y éste se asigna al $scope.
  • Líneas 13 y 18: Vemos como hemos creado otros objetos dentro del objeto principal. Esto es algo normal en cualquier lenguaje para poder organizar las propiedades de nuestro modelo. Así por ejemplo para acceder a propiedad alergia habrás que escribir:

$scope.seguro.enfermedades.alergia

En AngularJS hay un dicho que dice: “Si el valor de tu directiva ng-model no incluye un punto es que está mal.

¿que quiere decir eso? Que nunca pongas propiedades con valores directamente en el $scope sino que crees un objeto con las propiedades que necesites y asignes dicho objeto al $scope

¿Porque necesitamos hacer eso? El motivo es que Angular en ciertas directivas creará nuevos scopes que heredarán de tu $scope y si pones las propiedades directamente en el $scope fallarán en ciertos casos y te costará descubrir que ha pasado.

En el ejemplo anterior todos las propiedades de la directiva ng-model empiezan por “seguro.” , es decir, que siempre llevan un “punto”, por lo que es correcto.

Lo que estaría mal sería haber hecho:

$scope.nif="";

En ese caso la directiva ng-model tiene el valor “nif”, es decir que NO tendría punto por lo que es incorrecta.

Ejemplo

1) Ya veremos que angular tiene una directiva llamada ngOption para evitar poner manualmente los tags <option>.
unidades/02_angular/04_formulario.1405176225.txt.gz · Última modificación: 2014/07/12 16:43 por admin
Ir hasta arriba
CC Attribution-Share Alike 3.0 Unported
chimeric.de = chi`s home Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0