(Chapter) 20-10 Reactive Forms y NGRX

Reactive Form y
NGRX
Reactive Form
Los formularios reactivos es una API que provee Angular para controlar formularios dinamicos.
Angular provee tres bloques de construcción de formularios, los cuales son:
FormControl:
● Controlador básico para el control de un Input en particular.
● Utilizado para controlar un solo input o complementándose con Formgroup
Reactive Form
FormGroup:
● Controlador que permite el control de un grupo de FormControls.
● Utilizado especialmente para tener el control de un formulario conformado de varios
Reactive Form
FormArray:
● Controlador que permite la construcción dinamica de formularios.
● Utilizado especialmente cuando no tenemos el control del total de datos que pueden ir
en el formulario de nuestro formGroup.
Abstract Control
Tanto FormControl, FormGroup y FormArray implementan la clase AbstracControl.
Propiedades básicas del Abstract Control:
● Value: muestra el valor actual del controlador o un grupo.
● ValueChange: Se pueden detectar los cambios a través de la suscripción del método.
● SetValue y PathValue: Se puede setear valores mediante el método.
● Valid e Invalid: Permite el control de validez del controlador o grupo.
● Error: Permite el control de cuales son los errores del controlador o del grupo.
Abstract Control
● Disable y Enable: Se puede desactivar o activar con las propiedades disabled y enable.
● Pristine y Dirty: Identifica si el usuario a hecho cambios en el UI de controlador o grupo.
● Touched y Untouched: Identifica si el usuario a tocado o interactuado con el input (evento Blur)
● Validators: Permite agregar validadores generales de HTML, validadores con expresión regular y
validadores custom.
○ Validators HTML: Email, MinLength, MaxLength, Required, etc.
○ Validator PATTERN: Recibe una expresión regular.
○ Validator: función que retorna una funciona validadora.
Reactive Form | Status
Los FormControl, FormGroup y Form Array tienen un estado llamado STATUS,

los cuales son:
● Valid: Cuando el pasan todos los validadores
● Invalid: Cuando falla al menos un validador
● Pending: Cuando se está evaluando un Validador
● Disable: Cuando se deshabilita el controlador.
* El FormControl al estar deshabilitado no se incluye en la validación.

DEMO
¿Que es REDUX?
REDUX es un patrón de arquitectura de datos que permite manejar el estado de aplicaciones de
forma centralizada (State management). Esta basado en el
Beneficios
● Arquitectura escalable de datos

● Mayor control sobre el flujo de datos y
el estado de la aplicación
● Estado global e inmutable
Principios básicos de REDUX
● Store como única fuente de la verdad.

● El estado (State) es de solo lectura.
● Los cambios se hacen a través de
acciones (Actions) y funciones reductoras
(Reducers).
es.redux.js.org
FLUJO REDUX
Elementos Básicos
● ACTIONS
Las acciones son un bloque de información que envía datos desde tu aplicación a tu store.
Son la única fuente de información para el store.
Las acciones son enviadas al store usando store.dispatch().
● REDUCERS
Los reductores son funciones puras que toma el
estado anterior (OLD STATE) y una acción, y
devuelve en nuevo estado.
Elementos Básicos
● STORE
El Store es un objeto único que permite el almacenamiento, la obtención y la actualización del STATE.
Dentro de sus responsabilidades está:
▪ Contiene el estado de la aplicación.
▪ Permite el acceso al estado via getState().
▪ Permite que el estado sea actualizado via dispatch(action).
▪ Permite notificar cambios de estado via subscribe().
● STATE
Los States son datos o interacciones que cambian constantemente en el tiempo.
Dentro de sus características están:
▪ Es de solo lectura
▪ Nunca se muta de forma directa
● MIDDLEWARE
Proporciona un punto de control entre el envió de una Action y el momento de ejecución de un Reducers.
Cumple el mismo principio que los middleware de Express en NODEJS.
¿Que es NGRX?
NGRX es un framework que permite controlar el estado de aplicaciones ANGULAR de forma
reactiva.
NGRX provee varias librerías entre las cuales están:
● Store : Para le manejo global y local del State.
● Effects: Para el manejo de middlewares de una forma más limpia y aislada.
● Entity: Para el manejo de colecciones de entidades.
● Router-store: Para la integración con Angular router.
● Store-devtools: para mejorar la experiencia de desarrollo.

Flujo de APP con NGRX
DEMO

(Chapter) 20-10 Reactive Forms y NGRX

Cargado por

Copyright:

Formatos disponibles

(Chapter) 20-10 Reactive Forms y NGRX

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

(Chapter) 20-10 Reactive Forms y NGRX

Cargado por

Copyright:

Formatos disponibles

Reactive Form y

Propiedades básicas del Abstract Control:

● Value: muestra el valor actual del controlador o un grupo.

● ValueChange: Se pueden detectar los cambios a través de la suscripción del método.

● SetValue y PathValue: Se puede setear valores mediante el método.

● Valid e Invalid: Permite el control de validez del controlador o grupo.

● Pristine y Dirty: Identifica si el usuario a hecho cambios en el UI de controlador o grupo.

Los FormControl, FormGroup y Form Array tienen un estado llamado STATUS,

* El FormControl al estar deshabilitado no se incluye en la validación.

● Arquitectura escalable de datos

Principios básicos de REDUX

● Store como única fuente de la verdad.

NGRX provee varias librerías entre las cuales están:

● Store : Para le manejo global y local del State.

● Effects: Para el manejo de middlewares de una forma más limpia y aislada.

● Entity: Para el manejo de colecciones de entidades.

● Router-store: Para la integración con Angular router.

● Store-devtools: para mejorar la experiencia de desarrollo.

También podría gustarte