Angular 8 ExpressionChangedAfterItHasBeenCheckedError 反应形式的无线电验证

Question

I'm using the following code to add components to a FormGroup:

for (let index = 0; index < this.options.length; index++) {
    let element = 'radio_element_' + index;
    this.formGroup.addControl(element, new FormControl(null, [Validators.required]));
}

Each iteration through the loop adds an option to a set of radio buttons. But, I get the following error:

core.js:6185 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'ng-valid': 'true'. Current value: 'false'.
    at throwErrorIfNoChangesMode (core.js:8092)
    at bindingUpdated (core.js:19773)
    at checkStylingProperty (core.js:23355)
    at ɵɵclassProp (core.js:23255)
    at NgControlStatusGroup_HostBindings (forms.js:1015)
    at setHostBindingsByExecutingExpandoInstructions (core.js:11476)
    at refreshView (core.js:11843)
    at refreshDynamicEmbeddedViews (core.js:13154)
    at refreshView (core.js:11819)
    at refreshDynamicEmbeddedViews (core.js:13154)

The error began occuring when I introduced validation to the FormControls by adding null, [Validators.required] . What could be the cause of the issue?

Answer 1

I had the same problem and I get rid of it by removing formGroup selector from the template

instead of

<div [formGroup]="group">
  <input formControlName="item" />
</div>

use

<div>
  <input [formControl]="group.controls.item" />
</div>

this helps me, maybe it is your case, too

Answer 2

I also faced this problem. I was getting problem in directive's @Hosting property. I checked thoroughly where that directive was using and then in one component I have seen inside the ngOnInit() observers have been subscribed, where MarkForCheck() used. So I just replaced the markForCheck() with detectChanges(), and finally it worked for me.

Answer 3

simply use change detector on value change event