Estoy usando formularios reactivos en una aplicación angular 2+ y es necesario pasar el FormGroup principal a varios componentes para que las diferentes partes del formulario, por ejemplo, el encabezado, el pie de página, etc., puedan administrarse en componentes separados y completarse con esos diferentes componentes. Así es como lo estoy haciendo, en este momento:
<div class="container-fluid"> <form [formGroup]="orderForm"> <order-header [orderForm]="orderForm"></order-header> <order-items [orderForm]="orderForm"></order-items> <order-footer [orderForm]="orderForm"></order-footer> </form> </div>Me pregunto si este es un enfoque correcto porque veo una advertencia/error con este código:
ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: La expresión ha cambiado después de que se verificó. Valor anterior: 'verdadero'. Valor actual: 'falso'.
En esta línea:
<form [formGroup]="orderForm">
¿Alguna sugerencia? Gracias.
Como mencionó Julia, este es un comportamiento normal.
En realidad, es @Input en sus componentes lo que está causando esto, no la línea <form [formGroup]="orderForm">
Esto sucede durante el modo de desarrollo. La forma de solucionar este problema es activar manualmente la detección de cambios en los componentes que reciben el formulario de orderForm . Como está usando @Input , puede usar el gancho del ciclo de vida ngOnChanges en sus otros componentes:
import { ChangeDetectorRef } from '@angular/core'; @Input() orderForm: FormGroup constructor(private ref: ChangeDetectorRef) { } ngOnChanges() { this.ref.detectChanges() }Verifique más aquí sobre su error: la expresión ___ ha cambiado después de que se verificó
Además, como nota al margen, ¿realmente necesita pasar el formulario completo a sus otros componentes? Por lo general, solo pasamos el grupo anidado que manejará el componente, así que algo como esto:
<form [formGroup]="orderForm"> <order-header [orderForm]="orderForm.controls.myNestedGroupName"></order-header> </form>¡Solo como una nota al margen! :)
Lo estás haciendo correctamente. Angular en modo de desarrollo realiza dos ciclos de detección de cambios. Uno es normal y el segundo es verificar que todas las funciones llamadas la primera y la segunda vez devuelvan el mismo resultado. verifique que todos sus @Input o funciones llamadas desde la plantilla para representar valores no muten valores.
Por ejemplo, este componente lanzará esta excepción porque la función long() siempre devuelve valores diferentes.
@Component({ selector: 'my-app', template: ` {{long()}} `, }) export class App { name:string; i=0; constructor() { this.name = `Angular! v${VERSION.full}` } long(){ return this.i++; } }