Visión general de las formas en angular

El flujo de datos en Angular se maneja de manera diferente tanto en la forma reactiva como en la de plantilla.

Los ejemplos de flujo de datos que figuran a continuación comienzan con el ejemplo de campo de entrada de texto de arriba, y luego muestran cómo se manejan los cambios en el texto de ejemplo en formas reactivas en comparación con las formas basadas en plantillas.

Flujo de datos en formas reactivas

Las actualizaciones o cambios de la vista (o DOM) al modelo y del modelo a la vista son sincrónicos y no dependen de la representación de la interfaz de usuario. En las formas reactivas, cada elemento de forma en la vista está directamente vinculado a un modelo de forma (instancia FormControl).

Consideremos un ejemplo que se muestra a continuación y repasemos los pasos del flujo de datos en formas reactivas.

Nombre de archivo: example.component.ts

123456789101112importar{Componente}de$0027@angular/núcleo$0027;importar{FormControl}de$0027@angular/formas$0027;@Componente({ selector:$0027app-reactive-example$0027, plantilla:` Entrada de ejemplo: <input type="text" [formControl]="exampleControl"> `})exportclassComponente de ejemplo{ exampleControl =newFormControl($0027$0027);}

tipografía

Los pasos que se indican a continuación esbozan el flujo de datos desde la vista hasta el modelo.

1. El usuario teclea un valor en el elemento de entrada, en este caso, el valor de texto dice «Hola Mundo».
2. El elemento de entrada de la forma emite un evento de «entrada» con el último valor.
3. El accesorio de valor de control que escucha los eventos en el elemento de entrada de forma transmite inmediatamente el nuevo valor a la instancia de control de forma.
4. La instancia FormControl emite el nuevo valor a través de los ValueChanges observables.
5. Todos los suscriptores del valorCambios observables reciben el nuevo valor.

Los pasos que se indican a continuación esbozan el flujo de datos desde el modelo hasta la vista.

1. El usuario llama al método exampleControl.setValue(), que actualiza el valor de FormControl.
2. La instancia FormControl emite el nuevo valor a través de los ValueChanges observables.
3. Todos los suscriptores del valorCambios observables reciben el nuevo valor.
4. El accesorio de valor de control en el elemento de entrada de forma actualiza el elemento con el nuevo valor.

Flujo de datos en formas dirigidas por plantillas

En los formularios basados en plantillas, cada elemento del formulario está vinculado a una directiva que gestiona el modelo de formulario internamente.

Consideremos un ejemplo que se muestra a continuación y repasemos los pasos del flujo de datos en formularios basados en plantillas.

Nombre de archivo: example.component.ts

1234567891011importar{Componente}de$0027@angular/núcleo$0027;@Componente({ selector:$0027app-plantilla-ejemplo$0027, plantilla:` Texto de ejemplo: <input type="text" [(ngModel)]="exampleText"> `})exportclassComponente de ejemplo{ exampleText =$0027$0027;}

tipografía

Los pasos que se indican a continuación esbozan el flujo de datos desde la vista hasta el modelo.

1. El usuario escribe «Hola Mundo» en el elemento de entrada.
2. El elemento de entrada emite un evento de «entrada» con el valor «Hola Mundo».
3. El accesorio de valor de control adjunto a la entrada activa el método setValue() en la instancia FormControl.
4. La instancia FormControl emite el nuevo valor a través de los ValueChanges observables.
5. Todos los suscriptores del valorCambios observables reciben el nuevo valor.
6. El accesorio de valor de control también llama al método NgModel.viewToModelUpdate() que emite un evento ngModelChange.
7. Dado que la plantilla del componente utiliza una vinculación de datos bidireccional para la propiedad exampleText, la propiedad exampleText del componente se actualiza al valor emitido por el evento ngModelChange.

Los pasos que se indican a continuación esbozan el flujo de datos desde el modelo hasta la vista.

1. El valor del texto de ejemplo se actualiza en el componente.
2. Comienza la detección de cambios.
3. Durante la detección de cambios, el gancho de ciclo de vida ngOnChanges es llamado en la instancia de la directiva NgModel porque el valor de una de sus entradas ha cambiado.
4. El método ngOnChanges() pone en cola una tarea async para establecer el valor de la instancia interna de FormControl.
5. La detección de cambios se ha completado.
6. En la siguiente marca, se ejecuta la tarea de establecer el valor de la instancia de FormControl.
7. La instancia FormControl emite el último valor a través de los ValueChanges observables.
8. Todos los suscriptores del valorCambios observables reciben el nuevo valor.
9. El accesorio de valor de control actualiza el elemento de entrada de forma en la vista con el último valor de texto de ejemplo.