I am using reactive forms in an angular 2+ application and there is a need to pass the main FormGroup to multiple components so that different parts of the form e.g. header, footer etc can be managed in separate components and populated by those different components. This is how I am doing it, at the moment:
<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>
I am wondering, if this is a correct approach coz I do see a warning/error with this code:
ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.
On this line:
<form [formGroup]="orderForm">
Any suggestions? Thanks.
As mentioned by Julia, this is normal behavior.
It's actually the @Input in your components that are causing this, not the line <form [formGroup]="orderForm">
This happens during dev mode. How you can get around this problem, is to manually trigger change detection in the components that receive the orderForm. Since you are using @Input, you can use the ngOnChanges life cycle hook in your other components:
import { ChangeDetectorRef } from '@angular/core';
@Input() orderForm: FormGroup
constructor(private ref: ChangeDetectorRef) { }
ngOnChanges() {
this.ref.detectChanges()
}
Check more here about your error: Expression ___ has changed after it was checked
Also, as a sidenote, do you really need to pass the complete form to your other components. Usually we pass just the nested group that the component will handle, so something like this:
<form [formGroup]="orderForm">
<order-header [orderForm]="orderForm.controls.myNestedGroupName"></order-header>
</form>
Just as a sidenote! :)
You are doing it correctly. Angular in dev mode perform two change detection cycles. One is normal and the second is to check that all called function first time and second time returns the same result. check that all your @Input or function called from template to render values do not mutate values.
For example this component will throw this exception because long() function always return different values.
@Component({
selector: 'my-app',
template: `
{{long()}}
`,
})
export class App {
name:string;
i=0;
constructor() {
this.name = `Angular! v${VERSION.full}`
}
long(){
return this.i++;
}
}