Angular Basics - Formularios (Reactivos y Dirigidos por Plantilla)

[@michaelcastillo383]

Muchas gracias por los videos Akotech, son realmente excelentes, les comento que estoy siguiendo todos estos pasos y me encontré con un problema en el minuto 6:12, en el cual se asigna las credenciales al método LogIn de Auth, cuando hago la asignación me genera el error: "Argument of type 'Partial

[@akotech]

Hola Michael, desde la introducción de los formularios tipados el trabajo con el valor de los formularios se ha vuelto más estricto y a la par que seguro. Para que te funcione este ejemplo en la v14 digamos de forma natural, tienes que hacer 2 cosas: 1- Marcar los FormControl como _nonNullable_, lo que indica que aunque estos se reseteen van a contener un string (ie.- new FormControl('', { nonNullable:true})). 2- Usar en este caso _getRawValue()_ para obtener el valor del formulario en vez de _value_. Cuando obtenemos el valor de formulario usando .value, este nos devuelve los valores de todos los campos que no estén deshabilitados en ese momento. Como TS no tiene manera de predecir que campos van a estar deshabilitados, si los hubiera, en el momento que llamamos a value, te lo devuelve como tipo Partial. Como en este caso estamos no estamos deshabilitando ningún campo del formulario, podemos tranquilamente usar el método getRawValue() del FormGroup, el cual nos devuelve el valor de todos los controles independientemente de si están deshabilitados o no. El código quedaría pues: ... loginForm = new FormGroup( { email: new FormControl('', { nonNullable: true}), password: new FormControl('', { nonNullable: true}), } ); ... signIn(): void { const credentials = this.loginForm.getRawValue(); this.authService.logIn(credentials); } un saludo y gracias por tu comentario

[@michaelcastillo383]

@@akotech Muchas gracias por la pronta respuesta, la solución proporcionada funciona sin inconvenientes, eres excelnete explicando todo esto, para los demás usuarios, pondré el código completo: loginForm = new FormGroup({ email: new FormControl('', { nonNullable: true, validators: [Validators.required, Validators.email] }), password: new FormControl('', { nonNullable:true, validators: [Validators.required] }), }); .... signIn() : void { const credential = this.loginForm.getRawValue(); this.authService.logIn(credential); }

[@PinguyBros]

uffff eres muy buen maestro

[@akotech]

Muchas gracias 😊!

[@ferlezcano]

akotech, no encuentro un solo video que no tenga buenísimas palabras para el canal. Como siempre, excelente video y muy muy bien explicado 💪

[@akotech]

Me dejas ya sin palabras para agradecerte el apoyo que me estás dando. 😊 De verdad que muchísimas gracias Fernando! un saludo

[@eslackware]

¡Felicidades a Akotech por tu increíble trabajo en tu canal de KZbin! Tu forma didáctica de enseñar programación es realmente impresionante. Tus videos son una gran fuente de conocimiento y aprendizaje para todos los que te seguimos. Tu dedicación y pasión por enseñar y compartir tus conocimientos son evidentes en cada uno de tus videos. ¡Eres un verdadero profesional y una gran inspiración para aquellos que quieren aprender y mejorar en la programación! ¡Seguiremos aprendiendo de ti y esperamos ver más de tu increíble trabajo en el futuro!

[@akotech]

Me dejas sin palabras... Muchas gracias, de verdad. un saludo

[@theyagerprogramming5010]

Que belleza de vídeo.... Muchas gracias!!!

[@akotech]

Gracias a ti por tus palabras 😊 Un saludo

[@daguttt]

3 meses depués, vuelvo a ver el video detenidamente. La verdad es que siempre que entro a cualquiera de tus videos así ya los haya visto, son geniales. 😁 En fin. Me gustaría recordarte algo que dices en el min 25:56. Ya sabrás que es. Estamos al pendiente de ese video 👀👀.

[@akotech]

Muchas gracias una vez más por tus palaras Daniel! Y tranquilo que no me olvido... 😉 un saludo

[@juanarango2966]

Excelente video !! supremamente claro !!! esta lista de reproducción esta super bien elaborada. Enhorabuena !!

[@akotech]

Muchas gracias Juan! un saludo 😉

[@advancexz0]

ok, lo puse en pausa para comentar que estos videos son de lo mejor que me he encontrado! super bien explicados, felicidades!!

[@atzintort8193]

Muy bien explicado!!! 10 de 10

[@akotech]

Muchas gracias! un saludo

[@YosipmikeColin]

Exelente video amigo, me gusta la calidad del video y su forma de explicar, sigue asi ....

[@pedromedina1987]

Excelente aporte, muy buen video!!

[@akotech]

Muchas gracias 😊!

[@CanalRubi]

Que potencia de los formularios en Angular, calidad!! Muchas gracias!!

[@jmgg5278]

Que calidad de vídeo, gracias 👌

[@akotech]

Gracias 😊!

[@betweencode]

Igual hago vídeos, y me quede pasmado de lo genial que tienes en presentaciones!!.. espero que sigas creciendo y saludos by betweencoderos :) ...

[@akotech]

Muchas gracias 😊! Un saludo y suerte para ti también.

[@mauriciomontes8235]

tienes cursos de pago o algo así?? la verdad es que están muy buenos... muchas gracias

[@akotech]

Hola Mauricio, no lo descarto para el futuro pero de momento no tengo cursos pago. un saludo y muchas gracias por tu comentario.

[@oscarperez-kp3qd]

Excelente video como todos los de esta lista. Podrías por favor enseñarnos los componentes que creas para reurilizarlos y mostrar los mensaje de error?(minutos 11:10 aproximadamente)

[@akotech]

Gracias nuevamente por tu apoyo Oscar. El enlace al repositorio con el código completo del curso lo puedes encontrar en la descripción de los videos. Específicamente el de los componentes para mostrar los errores los puedes encontrar aquí: github.com/ako-tech/angular-basics-project/tree/8-forms/src/app/form-extensions Si necesitas aclaración sobre alguna cosa de estos componentes, aquí estamos. un saludo

[@oscarperez-kp3qd]

@@akotech muchas gracias!

[@gerardocardenas8805]

Buen video, muchas gracias y Dios le bendiga, ahora tengo una duda, cuando en un tabla por ejemplo p-table de primeng, solo quiero crear formControl en dos campos , ahora cada si le pongo como nombre al formControlName el id de esa fila, me puede servir como referencia para despues obtener el dato de esa casilla en especifico?

[@akotech]

Por lo que entiendo estás intentando crear una tabla para editar 2 campos de múltiples registros. Si es así, tendrás que crear un FormArray donde cada elemento del mismo sea un FormGroup con dos controles que represente al formulario de cada registro. Un saludo

[@Chris_7477]

No puedo creer que semejante pedazo de canal tenga tan poquitos subs! Lo que se estan perdiendo

[@akotech]

Muchísimas gracias por tus palabras Chris! 😊 un saludo

[@daguttt]

Llevo alrededor de 6 meses aprendiendo Angular y de lo que he visto de manejo de formularios en este framework... este video honestamente ha sido el mejor que he visto 🔥🤯. Durante el video tuve varios momentos tipo: "Aaaaah ya entiendo 🤔, tiene sentido". @akotech Keep up the Excellent job!

[@akotech]

Me alegro de haberte ayudado 😊 un saludo y muchas gracias por tu comentario!

[@mauriciosoto7730]

excelente video y excelente explicación .... tengo una consulta por que en el minuto 13:57 cuando creas la función passwordsMustBeEqual y asignas la variable const newPassword = group.get('newPassword') as Formcontrol:

[@akotech]

Es una conversión de tipo o _typecasting_ . El método get() del FormGroup devuelve un AbstractControl, ya que cuando obtenemos un control de un grupo, este puede ser un FormControl, un FormArray u otro FormGroup. Haciendo uso del _typecasting_ ayudamos a Typescript diciéndole que lo que estamos guardando en la variable es específicamente un FormControl. Realmente en este caso no hace falta, porque lo único que estamos obteniendo de los controles es la propiedad value y ésta ya está definida en AbstractControl, pero por costumbre siempre que obtengo un control con get lo casteo al tipo correcto para tener mejor _intellisense_ en el editor. Espero haberme explicado bien. un saludo.

[@renzoortegatorres1461]

Hola Akotech, excelente tu video, tengo un problema espero te haya pasado,para actualizar un registro al momento de dar clik en el boton editar me carga los datos en los controles del sistema que estoy desarrollando(Estoy trabajando con Firmulario Reactivo). Cuando por ejemplo modifico un dato en un combo, por ejemplo cargó Tipo Producto Jardinería y lo cambio para actualizarlo por el Tipo de Producto Terraza, se borran los campos del FormGroup y solo envia el dato que he modificado y los que se cargan por defecto en el FormGroup y el resto los envío null, pero si no cambio ningun dato y lo guardo, sí me guarda. Es como si al momento de seleccionar otro dato de los combos o cambiar la fecha se volveria a cargar el FormGroup. Si tienes alguna solución sería genial.

[@akotech]

Hola Renzo, lo primero gracias por tu comentario! Respecto a tu problema, me temo que sin ver el código es difícil saber que puede estar pasando. Si quieres pásame el enlace al repositorio o replica esa parte de la aplicación en un stackblitz y en cuanto tenga un rato le echo un vistacillo. un saludo

[@carlospuyana6068]

Muy buen video amigo, tendría una duda. Como sería posible hacer , teniendo varios enlaces, cuando pulses en uno te muestre un formulario, y cuando pulses en otro enlace, el formulario anterior se cambia por otro formulario (dentro de la misma pagina). Gracias de antemano!

[@akotech]

Lo primero muchas gracias por tu comentario Carlos! Respecto a tu pregunta entiendo que cada uno de los formularios que quieres mostrar son distintos entre si y que no cambian solo los datos de uno a otro. En ese caso, puedes crear una propiedad en la clase de tu componente (ej.- selectedForm) cuyo valor actualices cuando cliques en cada uno de los botones. Y luego en el template añadir un ngIf a cada para mostrar uno u otro en función del valor de esa propiedad. (ej.- ) Espero haber entendido bien tu duda y haberme sabido explicar. Si no es así, no dudes en comentar otra vez. un saludo