0

I am seeing Expression Has Changed error with below code which works fine in V11 but fails in V14.

Its a simple code , where i am creating a form Group in parent component and passing it to Child Component where i am adding a form control ( with required validator ), which will make the form group invalid.

app.component.html :

import { Component } from '@angular/core';
import {FormGroup} from "@angular/forms";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'helloworld';

  formGroup: FormGroup = new FormGroup<any>({});
}

app.component.html :

<form [formGroup]="formGroup">
  Form Is Valid : {{formGroup.valid}}
  {{title}}

  <app-child [formGroup]="formGroup"></app-child>
</form>

child.component.ts :

import {Component, Input, OnInit} from '@angular/core';
import {FormControl, FormGroup, Validators} from "@angular/forms";

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {

  @Input() formGroup: FormGroup;
  constructor() { }

  ngOnInit(): void {
    this.formGroup.addControl('name', new FormControl('', [Validators.required]));
    console.log('ChildComponent OnInit')
  }
}

child.component.html :

<ng-container [formGroup]="formGroup">
  <input formControlName="name">
</ng-container>

It is complaining with below error ( on line Form Is Valid : {{formGroup.valid}} in app.component.html)

ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'

My understanding was , app component will update its bindings( DOM Update/ Rendering ) only after child component OnInit /DoCheck hooks run.

Wasim Shariff
  • 11
  • 3

1 Answers1

0

AppComponent creates the (empty) FormGroup, then ChildComponent is instanciated and it changes the content of that same FormGroup.

That is when AppComponent's template reacts to the change. This is the change that occurs "After It Has Been Checked".

You could move Form Is Valid : {{formGroup.valid}} to the ChildComponent's template. Or you could move the creation of FormGroup to the ChildComponent.

Sébastien
  • 11,860
  • 11
  • 58
  • 78
  • Hi Sebastien, thanks for the reply. But the same thing works for older angular versions. I checked it on v8. So, thats where i am getting lost as to what changed in 14 wrt ChangeDetection flow – Wasim Shariff Oct 20 '22 at 23:44
  • Looks like AppComponent gets Rendered before Child Component onInit/doCheck hooks get called – Wasim Shariff Oct 20 '22 at 23:47
  • "Looks like AppComponent gets Rendered before Child Component onInit/doCheck hooks get called" that has always been the case in Angular. – Sébastien Oct 21 '22 at 10:57