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

【问题标题】：Angular 8 ExpressionChangedAfterItHasBeenCheckedError radio validation on reactive formAngular 8 ExpressionChangedAfterItHasBeenCheckedError 反应形式的无线电验证
【发布时间】：2023-04-02 02:08:01
【问题描述】：

我正在使用以下代码将组件添加到 FormGroup：

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

循环中的每次迭代都会为一组单选按钮添加一个选项。但是，我收到以下错误：

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)

当我通过添加 null, [Validators.required] 向 FormControls 引入验证时，错误开始出现。问题的原因可能是什么？

【问题讨论】：

标签： angular validation angular-reactive-forms form-control

【解决方案1】：

我遇到了同样的问题，我通过从模板中删除 formGroup 选择器来解决它

而不是

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

使用

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

这对我有帮助，也许你的情况也是如此

【讨论】：

【解决方案2】：

我也遇到过这个问题。我在指令的 @Hosting 属性中遇到问题。我彻底检查了该指令在哪里使用，然后在一个组件中我看到 ngOnInit() 观察者已被订阅，其中使用了 MarkForCheck()。所以我只是用detectChanges()替换了markForCheck()，最后它对我有用。

【讨论】：

【解决方案3】：

只需对值更改事件使用更改检测器

【讨论】：