Bienvenidos en esta clase continuamos con crear el formulario en nuestra aplicación con Angular en el
frontón.
Entonces vamos a comenzar creando el componente.
Nos vamos al terminal y con el comando en ti G de genes de C de componer, le vamos a indicar el lugar
donde queremos crear el componente clientes Larch.
Entonces la idea es que se crea dentro de clientes junto con el componente clientes y le vamos a llamar
form de formulario o el nombre que quieran.
Y además vamos a agregar la bandera menos menos flat.
Esto indica que no tiene que crear la carpeta for dentro de clientes.
Simplemente omite crear el directorio form y va a crear la componente directamente en clientes.
Enter y observamos que dentro de clientes se crea el form componer CSS, el HTML, el spec y el componente
de la clase.
Vamos a eliminar el especto y la hoja de estilo, ya que no la vamos a utilizar.
Bien, vamos a modificar el for component como eliminamos la hoja de estilo.
Simplemente la tenemos que quitar de acá.
Si no le quitamos, va a lanzar un error.
Guardamos y vamos a abrir el app module.
La configuración de nuestro módulo y vamos a agregar el módulo para formulario.
Bueno, si se fijan acá.
Registra el componente form y lo declara en integrar Echolls.
Lo está registrando de forma automática a través del angulas y delay.
Entonces vamos a importar forms module.
From Varroa Angular Forns y vamos a tomar este Forns modulan y lo vamos a importar acá en import fon
module y agregamos la coma.
Bien, con eso ya registramos nuestro módulo para traja con formularios.
Guardamos.
Vamos a cerrar y el siguiente paso sería implementar nuestra vista formulario.
Vamos a quitar el contenido.
Vamos a agregar un div para el panel para el Carth
y le damos un color de fondo dark y que el texto sea de color blanco width, text, width y cerramos
las comillas.
Bien, ahí tenemos nuestro div, nuestro panel y dentro vamos a agregar el car getter y el body.
Y el body?
Acá vamos a tener un título que vamos a declarar después en el componente y acá vamos a tener el formulario.
El cuerpo del panel.
Entonces lo primero es Fort.
Acá tenemos la etiqueta form del formulario.
El action lo vamos a quitar.
Y por cada conjunto elemento vamos a tener un form grupo para agrupar la etiqueta el label con el campo.
Necesitamos un div, un contenedor que va a agrupar todo el contenido, todas las fila de cada elemento.
Entonces un form group row para que sea horizontal.
Vamos a tener una etiqueta y vamos a tener un tipo en el div.
Vamos a tener el campo, el impulso a la etiqueta.
Le vamos a dar una clase también de vostra, un call form label y además le vamos a dar la medida de
la columna.
Entonces col.
De columna que ocupe dos columnas.
Recordemos que la columna empotra.
Son de 12.
Acá vamos a indicar que del total de 12 ocupe solamente 2 y acá en el TÍR también le vamos a indicar
las columnas.
Y acá que ocupe seis columnas de las doces.
Es decir, la mitad.
Luego damos un estilo en el campo, en el input form control.
Bien, ahí tenemos el esqueleto para cada campo, para cada grupo de campo que contiene el label y el
input.
Entonces vamos a copiar y pegar nombre, apellido y el email.
Entonces acá vamos a completar el label for nombre acá.
Nombre.
Acá vamos a colocar la directiva en Yí Model sería con los corchetes y con paréntesis en mi modelo.
Igual a un valor acá sería el nombre del atributo que va a estar en la clase component.
Eso después lo vamos a configurar.
Por ahora le vamos a colocar cliente, punto, nombre y también el nombre del campo con el name nombre.
Vamos a tener exactamente lo mismo para el apellido en el label for.
Apellido apellido en Model.
Acá podemos autocompletar con el Model.
Acá le damos al cliente punto apellido el name apellido que sería el nombre del campo y para email igual.
Bendi Model Cliente con tu email y email.
Bien, ahí tenemos el siguiente paso es explicar en qué consiste el modelo.
Pero antes vamos a crear el atributo cliente en el for component.
En la clase componente.
Entonces acá sobre el constructor, vamos a tener un atributo private cliente del tipo cliente del tipo
de la clase igual.
New cliente.
Vamos a importar cliente.
Recordemos que el cliente lo tenemos acá en la clase de modelo.
Entonces sería punto es Larch cliente.
Entonces, lo que hace el hinché Modell es una directiva que va a volar con los datos del formulario
al objeto, al atributo, al objeto cliente y a sus atributos.
Por ejemplo, el cliente punto nombre va a guardar el valor que escribamos en el campo nombre del formulario
lo va a poblar en este atributo.
Lo mismo con el apellido y lo mismo con el email.
En otras palabras, lo que hace es un Pindy que hace un binding.
Por lo tanto, va a poblar los datos del formulario al objeto cliente y sus atributos y es en ambas
direcciones.
Por ejemplo, si vamos a buscar un cliente a través del servicio y nos conectamos a un Wacken, a una
API Rest y obtenemos un cliente por SAIDI, acá va a mostrar los valores del objeto cliente en el formulario.
El nombre le pidió email muy parecido como traja Spring.
Por lo tanto, el formulario está mapeado, está asignado a un objeto.
Este objeto es un atributo en la clase componente y pasamos los datos.
Entonces, básicamente el model es para mapear el formulario a un objeto del modelo.
El siguiente paso sería crear el botón.
Acá tenemos un div también con la clase de Vostra Font Group y Row.
Otro día que iba a contener el botón,
iba a ocupar también 6 espacio.
Entonces un bottom que le vamos a llamar crear,
iba a tener la clase botón de vostra btn primary.
Y el rol Button?
Bien.
Ahí tenemos nuestra lista.
Solamente faltaría en el form la directiva en Již Summit sería con los paréntesis Genki igual y acá
agregamos el nombre del método del componente que se va a invocar cuando se envíe el formulario, cuando
se realice el submit create.
Entonces vamos a invocar al método Create.
Vamos a guardar y en la clase component.
Vamos a crear el método Crédit, no se Public Crédit va a retornar un void y ahí tenemos el método.
Entonces, por ahora
vamos a imprimir Flicker.
Y también el objeto cliente, el objeto cliente con todos sus datos.
Pero como es atributo sería un tiz punto cliente.
Bueno, después obviamente el método Crédit se va a conectar al API Rest y va a persistir el objeto
cliente que enviemos a través del formulario al API Rest.
Y solamente faltaría el título private del tipo String.
Crear cliente y guardamos.
Bien, estamos listo.
Ya tenemos implementado nuestro componente formulario con lo básico con todo su campo.
También tenemos mapeado cada campo del formulario con un atributo del objeto cliente que a su vez el
objeto cliente es un atributo del componente form.
Por lo tanto, de forma automática, cuando se envíe el formulario, va a invocar el Crédit.
El método CRÉE a través del aditiva submit va a ser un pint de los valores de los campos.
Iba a guardar esos valores en los atributos y cuando se invoque el método Grey, vamos a obtener el
cliente listo para que después se pueda guardar con todos sus datos.
Bien, entonces la siguiente clase.
Vamos a probar este ejemplo.
Vamos a crear la ruta del componente Form en module y también vamos a crear los links quedabamos hasta
acá.
Y cualquier duda que tengan los revisamos en los foros.
Hasta la próxima.