Cómo Deshabilitar Controles en los Formularios Reactivos de Angular.

[@ezequielrivera9992]

Por mucho tiempo busqué una explicación como esta, saludos y muchas gracias desde Aguascalientes

[@akotech]

Un placer haberte podido ayudar Ezequiel! un saludo

[@hacsor22]

Ojalá sea el primer video de una serie acerca de formularios. Muchas gracias!

[@akotech]

No es el primer video en el que tratamos cosas de formularios, ni será el último 😉. ¿Hay alguna cosa en particular que te gustaría que tratáramos? Se aceptan sugerencias... un saludo y gracias por tu comentario

[@hacsor22]

@@akotech Formularios dinámicos con FormArray. Gracias.

[@akotech]

@@hacsor22 me lo apunto! 😉

[@hacsor22]

@@akotech Con algún ejemplo de campos que carguen dependiendo de un json que devuelva el backend, seria la locura. Muchas gracias!

[@akotech]

@@hacsor22 te importaría darme un ejemplo específico de lo que buscas? gracias

[@ramonmartinez1144]

Buena Akotech. Saludos y Gracias nuevamente.

[@akotech]

Gracias a ti una vez más por tu apoyo! El próximo video ya es el tuyo 😉 un saludo

[@monk1585]

muchas gracias por todo lo que nos enseñas

[@akotech]

Gracias a ti por tus palabras! un saludo 😉

[@matavic25]

Excelente contenido. Muchas gracias!

[@akotech]

Gracias Vicente! un saludo 😉

[@elportu89]

muy buen video! Saludos y sigue aportando tus conocimientos a la comunidad de Angular

[@akotech]

Muchas gracias Javier! Aquí seguiremos 😉 un saludo

[@aldoturijan8844]

este tipo de videos es de angular avanzado, deberias hacer el curso como te dicen en los comentarios, hay muy poco contenido de este tipo

[@akotech]

Si todo va bien, alguno sacaremos este año 😉. un saludo y muchas gracias por tu cometario.

[@asanast]

Totalmente de acuerdo... Cualquier curso que se ve en udemy al final es siempre lo mismo. Crud y las bases. Un curso con tus conocimientos tu forma de explicar y con contenido avanzado hay realmente poco y yo pagaría pasta por el... Saludos y enhorabuena!

[@MarceloMenendez-np9iv]

Hola, ¿has pensado en hacer un curso completo de Angular y publicarlo en alguna plataforma?. Sigo tus videos desde que empezaste y me parecen geniales. Gracias por compartir tu conocimiento y espero que te animes a preparar un curso completo. Saludos.

[@akotech]

Sí tengo intención de hacer algún curso, pero la verdad que no me había planteado hacer de Angular a nivel global, sino de algún tema particular. Hay alguna cosa que hayas echado en falta en la serie de videos de Angular Basics? Gracias por tu comentario y apoyo 😉 un saludo

[@sedanospiano]

Hola muy buenas! Bestial el vídeo, la edición, la explicación, todo, tengo una pregunta usando el método "estándar", si yo tengo un select llamémoslo X, que debe estar deshabilitado a menos que un segundo select llamémoslo Y tenga el value distinto a null o ' ', siguiendo tu tutorial, lo he conseguido hacer, pero no consigo volver a deshabilitarlo en caso de que el usuario vuelva a poner el select Y con la opción que tiene el value a ' ' o null, la primera vez funciona, pero si el usuario vuelve a poner el option con el value ' ' el select X que debería deshabilitarse, se mantiene habilitado. Ojalá puedas echarme un cable, un saludo!

[@akotech]

Sin ver el código es difícil decirte cual puede ser el problema, pero si he entendido bien tu caso, deberías tener algo similar a esto: const { x, y } = this.myForm.controls; this.subscription = y.valueChanges .pipe( startWith(y.value), // solo necesario si Y lo inicias como null o '' map((yVal) => yVal === null || yVal === ''), tap((xShouldBeDisabled) => xShouldBeDisabled ? x.disable() : x.enable() ) ) .subscribe(); Si sigues teniendo problemas, pásame pls el enlace a tu repo para echarle un vistazo. O si lo tienes privado, intenta replicar esa parte del form en stackblitz y pásame el link. un saludo

[@sedanospiano]

@@akotech Pude ver el problema! Fue un error en la condición del ternario, lo tenía como elemento=== null || ' ', cuando tenía que ser elemento === null || elemento === ' ' Con esa condición se solucionan todos mis problemas.

[@rapsekill]

Que tal compañero, tengo una duda/porpuesta: Como ves hacer un video de como gestionar o como controlar los errores en controles de formulario personalizados? Ya vengan como FormControl, FormControlName, o NgModel, crees que sería interesante? Me estoy peleando con ello y estoy seguro que tu lo explicarías perfectamente. Un Saludo!

[@akotech]

Me puedes por favor explicar un poco que problemas estás teniendo. Porque en principio no debería haber ninguna diferencia a la hora de manejar los errores respecto a los controles estandar. un saludo

[@rapsekill]

@@akotech Basicamente tengo un componente en el que monto un select personalizado. Este componente lo necesito usar como formControl individualmente (sin formGroup) como en un formGrup con formControlName. Lo que me encuentro, es que si no inyecto NgControl para comprobar que tipo de formControl me llega no detecta los Validadores. No se si hay forma de gestionar eso sin tener que inyectar NgControl. Espero haberme explicado 😅

[@akotech]

@rapsekill Pero cuando hablas de gestionar los errores, a qué te refieres exactamente? Estás hablando de validar el valor del FormControl asociado, o de aplicarle por ejemplo un estilo de error al control de formulario personalizado? - Para el primer caso si es un control simple(en este caso un select), puedes añadir los validadores en el FormControl externo asociado. Y si es una lógica de validación que va a ser necesaria siempre que se utilice el control, puedes también reutilizar la clase del componente como directiva de validación implementando en la misma la interfaz Validator y añadiendo la clase como proveedor de NG_VALIDATORS. - Si solo necesitas añadir un estilo CSS o similar cuando el control sea invalido, pues entonces inyectar el NgControl puede ser una opción o también apoyarte en la clase .ng-invalid que añade angular en el control automáticamente. Espero esto resuelva tu duda 😉. Y sino pues explícame por favor mas detalladamente el caso o mejor aún reproduce esa parte de tu aplicación en un stackblitz y me pasas el enlace para echarle un vistazo. un saludo

[@urtaav639]

Tratando de practicar el tema, me paso lo siguiente: tengo un select(tipo persona) el cual al seleccionar tipo 1 habilito campo 1 al seleccionar tipo 2 deshabilito campo 1 y habilito campo 2 y 3, pero me sale el error ==> "Expression has changed after it was checked", esto por que se elimina el contro del form y al imprimirlo en una etiqueta {{form.value | json }} indica que el valor del form cambio, entonces no me queda clara la solución a este error, leí que usando getRowValue se soluciona ya que value solo muestra controles habilitados y getRowValue muestra tanto habilitados como deshabilitados que tan cierta es esta solución.

[@akotech]

Ese error se produce cuando cambias el valor de una expresión después de que esta haya sido evaluada por la detección de cambios. Sin ver el código no te puedo decir 100% la causa, pero por lo que comentas me atrevería a decir que en el template has puesto el antes que los inputs. En ese supuesto el form.value se evalúa antes de la deshabilitación de los controles y entonces cuando se evalúan los controles, el valor del form.value cambia, ya que como bien dices esos controles deshabilitados desaparecen. Si este es el caso, pues tienes 2 opciones: - mover el pre al final del template - o usar como dices getRawValue(), ya que ese, efectivamente, muestra todos los controles sin tener en cuenta el estado de habilitación y entonces en este caso no se vería afectado. Si aún así no se soluciona, por favor replica en código en un stackblitz para que le pueda echar un vistazo. un saludo

[@urtaav639]

@@akotech en efecto probe con getRawValue y funciona y tambien probe moviendo el {{form.value | json}} al final del templete y funciona correctamente. Gracias por responder era un error muy común que no tenia del todo claro su origen.

[@enriqueruiz320]

Maestro 😔