3 Opciones para manejar Formularios Anidados en Angular.

[@reliquia66]

para la solución 2, cómo agrego una leyenda roja a un campo requerido?

[@akotech]

Supongo que lo que tienes problemas es a la hora de obtener la referencia a los FormControl para chequear su estado y mostrar un mensaje de error cuando corresponda. Estas referencias las puedes obtener en el ejemplo del formulario reactivo anidado a través del ControlContainer padre. Para ello tienes que seguir los siguientes pasos: 1- Inyecta el ControlContainer en el constructor: constructor(private cc: ControlContainer) {} 2.- Crea unos getters para obtener la referencia a los controles o el grupo de la dirección: get addressFormGroup() { return this.cc.control?.get(this.groupName); } get line1Control() { return this.addressFormGroup?.get('line1'); // o directamente el FormControl del padre usando // return this.cc.control?.get(`${this.groupName}.line1`); } 3.- Y ya puedes usar estas referencias de los getters en el template para mostrar u ocultar el elemento del error. Tu mensaje de error Si no era esta tu duda, no dudes en volver a preguntar. un saludo y gracias por tu comentario.

[@reliquia66]

@@akotech funcionó perfecto, lo que no puedo hacer ahora es hacer focus al primer elemento inválido cuando le da clic a submit

[@akotech]

@@reliquia66 Eso lo puedes conseguir con javascript normal. Por ejemplo busca en el elemento del formulario el primer input que tenga la clase *ng-invalid* y llama al método focus de ese elemento. Y si vas a necesitar reutilizar esta lógica en diferentes formularios de tu aplicación, lo que puedes hacer es una directiva usando como selector 'form' que encapsule dicha lógica.

[@diego93el]

@@akotech Hola ako agradezco inmensamente tu colaboracion y tu excelente trabajo. Sigo teniendo la duda con este problema ya que se me presenta igual al tratar de mostrar un error si no se cumple alguno de los validators, si puedes ser mas detallista en donde tengo que inyectar los codigo get y en que template mostrar los span.

[@akotech]

@@diego93el Hola Diego, todo el código indicado va en el componente que tenga el formulario anidado. Los puntos 1 y 2 en el archivo ts y el 3 en el html. un saludo

[@daguttt]

¡Qué nivel de video! 🔥👌🏼

[@akotech]

Gracias! 😊

[@CachitaXD]

AkoGod vos sos el ninja developer n°1 de Angular sin ninguna duda. Ako > otherMortales

[@akotech]

jajajja... gracias un saludo 😉

[@DenisHernandezMichel]

Muchas gracias por compartir tus conocimientos, se logra un código mucho más mantenible y escalable

[@akotech]

Gracias por tus palabras 😊 un saludo

[@titandiaz]

Simplemente maravilloso!

[@akotech]

Gracias 😊!

[@pedrovila7306]

Eres un maquina !! Tus conocimientos de Angular son oro puro, gracias por compartirlos, un saludos !!

[@akotech]

Gracias a ti por tus palabras Pedro! un saludo 😉

[@IntelSoft.cl95]

va a explotar mi cerebro! pero super video muy pocos como este, gracias por el contenido y tienes un seguidor nuevo.

[@akotech]

Gracias y bienvenido 😉

[@Isaac_cobos]

Que pasada de clase magistral acabas de dar Akotech. He entendido perfectamente sobre este tema gracias a tu explicacion magnifica crack! Gracias y sigue subiendo videos por favor.

[@akotech]

Muchisimas gracias😊! un saludo.

[@manuelocana8049]

Gran aporte, sigue así!

[@akotech]

Gracias 😊!

[@alexloquendero1000]

Qué buen video! Inspiras bastante!

[@akotech]

Gracias! 😊

[@davidromaniuk]

Increibleeeeeeeeeeeeeeeeeeeeeeeeeeee gracias como siempre

[@akotech]

a ti! 😉 un saludo

[@luiseduardofarfanmelgar2340]

De verdad, tus videos son excelentes, la explicación es muy clara, ya conocia mas o menos del tema, pero tu me lo has reforzado, y ya casi lo entiendo perfectamente! Muchas gracias!

[@akotech]

Muchas gracias Luis! un saludo

[@universodev6187]

Buenísimo, excelente y completa explicación Gracias!!

[@akotech]

Gracias a ti por tu comentario! un saludo

[@eivanmtzleal9547]

Excelente!!!... Gracias por el aporte! ... Saludos...!

[@akotech]

Muchas gracias 😊!

[@urtaav639]

Buscaba hace algúnos meses un video sobre controlValueAccessor y hay muy pocos, me costó entender, pero con este video me refuerza más sobre este tema. Excelente contenido sigue así bro 👍👍👍

[@akotech]

En este video paso un poco por encima del ControlValueAccessor. Si quieres una explicación algo más detallada, si no lo has visto ya, te recomiendo que veas el video anterior que hice sobre el CVA que ahí explico con más detalle como funciona cada uno de los métodos. Esta el enlace en la descripción. un saludo y gracias por tu comentario 😊

[@franciscogiachero6632]

Muy buena explicación, en el caso de querer mostrar las distintas validaciones en el front de los form anidados como seria, me refiero por ejemplo, a que si el campo debe tener más de 3 caracteres que pueda mostrar un mensaje indicando esto.

[@akotech]

Muchas gracias por tu comentario Francisco. Respecto a tu duda acabo de fijar un comentario reciente en este mismo video con una duda muy similar a la que me planteas . Échale un vistazo y si hay algo que no entiendes o no es exactamente tu problema no dudes en volver a comentar. un saludo

[@Jrag-p7p]

Que gran video, que opinas de usar ParentForm como una solución para formularios anidados?

[@akotech]

Muchas gracias por tus palabras Rafael, pero no entiendo bien a que te refieres con lo de usar ParentForm. Si me lo pudieras por favor explicar mejor. un saludo 😉

[@jonnyrojas4950]

En el formulario reactivo, en el componente hijo, como hago para hacer la prueba unitaria, ya que tengo que inyectar un ControlContainer?

[@akotech]

Buenas jonny, pues depende lo que quieras testear en este caso: - Si solo quieres testear lógica de la clase (aunque en el ejemplo de video no hay), puedes crear el componente directamente llamando a _new AddressComponent()_ en vez de usar la TestBed para crearlo. - Si es para testear cosas del template, como el ControlContainer lo estamos inyectando con el modificador host, tendrás que crearte dentro del archivo de test una especie de WrapperComponent con un mini formulario que use el AddressComponent y proporcione ese contexto. No es fácil de explicar en un comentario, pero te he añadido en el repositorio un archivo de test como ejemplo de lo que me refiero. (github.com/ako-tech/angular-nested-forms/blob/subform-reactive/src/app/address/address.component.spec.ts ) Cualquier duda me dices. un saludo y gracias por tu comentario.

[@themusikislive]

en caso de tener formularios donde es necesario incluir un formArray dentro de otro formArray para llegar al campo editable según la estructura del requerimiento, es un array de tablas, y en cada tabla hay un input.

[@akotech]

lo siento Ian, pero no entiendo bien cual es tu duda. Podrías por favor reformularla. un saludo y muchas gracias por tu comentario

[@themusikislive]

@@akotech me surgió un problema donde la estructura es un array de arrays, varios datatable iguales con formularios internos. Cómo podría manejar estos formularios anidados ?

[@akotech]

@@themusikislive Sin ver el caso concreto es difícil darte una respuesta precisa. - Pero si como dices tienes un array de arrays, donde digamos cada celda es independiente, en principio no te haría falta anidar nada. Con transformar la data recibida en un FormArray> sería suficiente. Y luego en el template un par de for loops para renderizar las celdas con los inputs. - Por otro lado, si lo que representa ese array de arrays es un listado de entidades, donde cada fila es una entidad, tendrías un ejemplo similar al del video. Ahí si puedes crear un componente que maneje cada una de esas filas por separado (utilizando la opción del sub-form o del controlValueaccesor) y luego otro componente padre que se encargue del manejo general del conjunto. De todas formas si puedes reproducir esta parte de la aplicación en un stackblitz o similar, estaría encantado de echarle un vistazo en cuanto pueda para darte una mejor respuesta. un saludo

[@arturoschneider1835]

Buenas noches. Perdón la indiscreción antes que nada. Estoy buscando la mejor manera de, a partir del estado de un mat-radio-button, modificar el atributo [disabled] de otro input de type="number" dentro del mismo formGroup. No estoy encontrando material al respecto. Podrías darme una mano? Muchas gracias desde ya!

[@akotech]

Hola Arturo!, dando por hecho que estás usando los formularios reactivos, para habilidad/deshabilitar dinámicamente un input tienes que llamar a los métodos enable/disable del FormControl asociado a dicho input. Para tu caso particular se me ocurren dos opciones: 1. subscribirte al valueChanges del FormControl del radio button, y desde ese subscribe activar/desactivar el input númerico en función del valor emitido. 2. crearte una directiva (ej.- [disabledIf]) que acepte como input una condición booleana. E internamente inyectar el ngControl asociado y activar/desactivar dicho control en función de la condición. Te dejo el código en el siguiente enlace puedes ver ambos casos: stackblitz.com/edit/angular-ivy-kktcky Cualquier duda me dices un saludo y gracias por tu comentario 😉

[@arturoschneider6242]

@@akotech muchísimas gracias. Por tomarte el tiempo de responder. Que tengas excelente día! Saludos desde Argentina!

[@ohnullnull]

¿Y como hago para desactivar un campo de un formulario anidado pero desde el padre?

[@akotech]

Como norma general: - En los formularios de plantilla puedes hacerlo añadiendo un @Input en el sub-formulario - Y en los reactivos, como ya tienes la definición del esquema general del formulario en el padre, puedes directamente obtener la referencia al control que quieres desactivar y llamar a su método disable(). De todas formas, si no te importa, preferiría que me describieras más detalladamente tu caso para poder darte una respuesta más concreta. un saludo y gracias por tu comentario.

[@ohnullnull]

@@akotech Intenté accediendo a la referencia algo tipo. this.padreForm.get('subForm').get('datoValue') pero siempre me devuelven nullos. Entonces no puedo aplicar el disabled()

[@akotech]

@@ohnullnull Lo tienes en un repositorio publico para echarle un vistazo? Porque ya te digo que por ejemplo en el caso del subform-reactive del video, puedes hacer sin problema: this.form.get('deliveryAddress.city')?.disable(); o this.form.get('deliveryAddress')?.get('city')?.disable(); Y se deshabilita el campo de la ciudad del la dirección de entrega. Así sin verlo no puedo decirte cual es el problema. un saludo

[@ohnullnull]

​@@akotech Lo subo, pero quizás no funciona porque use el método 3? O quizás para ese debo hacerlo de otro manera, me hace sentido porque en el padre los hijos están como un objeto simplemente, en el método 2 reactivo están como formGroup

[@akotech]

@@ohnullnull Si estás usando la opción de ControlValueAccessor entonces es normal que te de null. Para lo que buscas en ese caso, la mejor opción probablemente sea usar @Input en el componente del CVA para habilitar/deshabilitar ese campo desde el padre. un saludo

[@CodeWithDesign]

Muy groso.. un crack.

[@akotech]

Muchas gracias!