====== 2.4 Formulario ====== Ahora que ya tenemos un conocimiento inicial de angular , ya podemos empezar a hacer un ejemplo un poco más real.El objetivo de este tema es crear un formulario (AngularJS tiene muchas más funcionalidades relativas a formularios que veremos más adelante) que permita la 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: class Seguro Seguro : String nif Seguro : String nombre Seguro : String ape1 Seguro : String ape2 Seguro : int edad Seguro : Sexo sexo Seguro : boolean casado Seguro : int numHijos Seguro : boolean embarazada Seguro : Coberturas coberturas Seguro : Enfermedades enfermedades Seguro : Date fechaCreacion class Coberturas Coberturas : boolean oftalmologia Coberturas : boolean dental Coberturas : boolean fecundacionInVitro class Enfermedades Enfermedades: boolean corazon Enfermedades: boolean estomacal Enfermedades: boolean rinyones Enfermedades: boolean alergia Enfermedades: String nombreAlergia class Sexo <> Sexo : H Sexo : M Coberturas "1"-"1" Seguro Seguro "1"-"1" Enfermedades Seguro "*" -- "1" Sexo
Seguro Médico








Coberturas


Enfermedades




* Línea 15: Se puede ver cómo hemos usado el tag ''''. AngularJS reconoce perfectamente el tag '''' 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 cómo la fecha se muestra en formato inglés. Este problema ya lo arreglaremos más 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 más importante aquí es que todas las propiedades de nuestro modelo no están en 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 cómo hemos creado otros objetos dentro del objeto principal. Ésto es algo normal en cualquier lenguaje para poder organizar las propiedades de nuestro modelo. Así ,por ejemplo, para acceder a propiedad ''alergia'' tendrá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.**" ¿Qué quiere decir éso? 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'' ¿Por qué necesitamos hacer éso? 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 qué 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 sería incorrecta. ===== Ejemplo ===== {{url>http://embed.plnkr.co/wRLzJC}}