Reactive Forms: Modificar Valores y Personalizar Controles

Formularios y Validación en Angular (III)

Photo by Bernin Uben on Unsplash

Como vimos en la clase anterior, las principales clases de ReactiveFormsModule son FormControl, FormArray y FormGroup. En esta clase vamos a profundizar un poco para ver cómo interactuar desde nuestro código con nuestros formularios.

FormControl

FormControl representa un solo control en el formulario. Puede ser un campo de entrada de texto, casilla de verificación, selector, etc. Se utiliza para rastrear el valor y el estado de un campo de entrada.

Las principales propiedades son:

• value: El valor actual del control.
• valid: Un booleano que indica si el control es válido. También existe su contraparte invalid.
• errors: Un objeto que contiene errores de validación para el control.
• touched: Un booleano que indica si el control ha sido tocado (interactuado) por el usuario. Además de este también existe untouched, dirty, prestine.

Ejemplo FormControl

Para modificar el valor de un FormControl, puedes utilizar el método setValue() o patchValue(). Estos métodos te permiten actualizar el valor de un control individual.

setValue(valor)

setValue(valor) establece el valor del control y, opcionalmente, lo valida. Puedes pasar un objeto que coincida con la estructura esperada de tu FormControl. Aquí hay un ejemplo:

Ejemplo setValue()

• onlySelf (opcional): Un booleano que determina si solo el control actual debe validarse, útil cuando trabajas con formularios anidados.
• emitEvent (opcional): Un booleano que decide si se debe emitir un evento valueChanges. Si lo estableces en false, no se activará el evento.

FormArray

FormArray se utiliza para almacenar un grupo de FormControl o subgrupos de FormGroup en un formulario. Es útil cuando tienes una colección dinámica de controles, como una lista de elementos.

Propiedades destacadas:

• controls: Un array que contiene todos los controles/grupos dentro del FormArray.
• length: La cantidad de elementos en el FormArray.
• push(control): Un método para agregar un nuevo elemento al FormArray.
• at(index): Un método para acceder a un control específico dentro del FormArray.

Ejemplo FormArray

FormGroup

FormGroup se utiliza para agrupar múltiples FormControl en un formulario. Proporciona métodos y propiedades para gestionar y validar un grupo de controles relacionados.

Aparte de las propiedades comentadas para FormControl, podemos destacar:

• controls: Un objeto que contiene todos los FormControl del grupo.
• value: Un objeto que representa el valor actual de todos los controles dentro del grupo.

Ejemplo FormGroup

Estas clases y sus propiedades y métodos asociados son esenciales para trabajar con formularios reactivos en Angular. Permiten una gestión completa y una fácil validación de los datos de entrada en una aplicación.