Odtnhj

I've seen, read and tried a lot of questions, answers and blogs about this topic. I understand why it is happening in my code, I just don't know how to fix it.

(Simplification of real code; If I made mistakes or forgot something important, please let me know in the comments)

I have parent component A with an input and child component B.

<form [formgroup]="modalForm">
 <input type="text" formControlName="text"></input>
 <componentB 
 [formControl]="modalForm.controls['componentB'] 
 [firstProperty]="foo" 
 [secondProperty]="bar">
 </componentB>
</form>

ComponentB has an input as well, and a custom message component:

<div>
 <input type="text" [formControl]="formControl"></input>
 <message
 [message]="firstProperty" 
 [secondMessage]="secondProperty">
 </message>
</div>

ComponentA:

export class ComponentA implements OnInit

 public foo: string;
 public bar: string;
 public modalFrom: FormGroup;

 public constructor(private componentBValidatorFactory: ComponentBValidatorFactory)

 public ngOnInit(): void 
 this.modalForm = new FormGroup(
 text: new FormControl(null),
 componentB: new FormControl(null, 
 validators: Validators.required,
 asyncValidatiors: [this.componentBValidatorFactory.asyncValidatorFn()],
 updateOn: 'blur'
 )
 );
 this.modalForm.controls['text'].valueChanges(subscribe( () => this.textChanged());
 this.modalForm.controls['componentB'].valueChanges(subscribe( () => this.componentBChanged());
 

 private textChanged(): void 
 this.foo = this.modalForm.controls['text'].value;
 

 private componentBChanged(): void 
 this.bar = this.modalForm.controls['componentB'].value + 'somestring';
 

ComponentB (simplified):

export class ComponentB

@Input()
public formControl: FormControl;

@Input()
public firstProperty: string;

@Input()
public secondProperty: string;

The issue (as I understand it):
When text changes (user input), it updates foo with a value. This means that ComponentB changes, so valueChanges of ComponentB is triggered. ComponentBChanged is fired and it updates bar.
When text changes again, bar is changed again, but as it is different from the earlier value when foo is processed the second time, I get the well known ExpressionChangedAfterItHasBeenCheckedError (values are processed correctly though).
As I understand it:
ComponentB was already updated (foo), which triggers another change in a binding of this same component (bar). Which does not make Angular happy.
Directly putting input in ComponentB (which also has an input field) works fine, it updates bar correctly without problems.

What can I do to be able to update bar without issues? I can't update bar in textChanged in my code as the update should also happen if ComponentB is manipulated directly.

Instead of passing FormControl to child Use then assign the foo and bar property to null

formControlDirective

This directive accepts an existing FormGroup instance. It will then
use this FormGroup instance to match any child FormControl, FormGroup,
and FormArray instances to child FormControlName, FormGroupName, and
FormArrayName directives.

Parent.component.html

<form [formGroup]="form">
 <label >Text</label>
 <input formControlName="text">
 <app-component-a 
 [firstProperty]="foo" 
 [secondProperty]="bar"
 ></app-component-a>
</form>

app-component-a.ts

import Component, OnInit, Input from '@angular/core';
import FormGroup, FormControl, ControlContainer, FormGroupDirective, Validators from '@angular/forms';
@Component(
 selector: 'app-component-a',
 templateUrl: './component-a.component.html',
 styleUrls: ['./component-a.component.css'],
 viewProviders:[provide: ControlContainer,useExisting:FormGroupDirective]
)
export class ComponentAComponent implements OnInit 

 @Input('firstProperty') firstProperty:string;
 @Input('secondProperty') secondProperty:string;

 constructor(private fgd:FormGroupDirective) 

 

 ngOnInit() 
 this.fgd.form.addControl('componentA',new FormControl('',updateOn: 'blur'))
 

Example:https://stackblitz.com/edit/angular-65nmvr