如何在不损害其功能的情况下在窗体数组中添加无效的窗体控件

Question

我想创建一个动态表单，将表单控件（必需的表单控件）添加到表单数组。

表单控件无效，因为它需要由用户填写（空白）

但是当我添加表单控件时，出现错误

  

ExpressionChangedAfterItHaHasBeenCheckedError：检查表达式后，表达式已更改。先前的值：“ ng-valid：true”。当前值：“ ng-valid：false”

在控制台中。

add(formControl) {
    (this.formGroup.get('array') asFormArray).push(formControl)
}

Answer 1

您只需要在添加无效的子表单后手动调用更改检测。自上而下地进行变更检测。从该错误来看，当按钮单击（或您用来添加新表单的任何内容）更改检测周期运行时，它已经在到达新添加的无效子表单时检查了表单的有效性。在添加新表单之后手动调用它会告诉Angular，因为较高元素中的表达式很可能已更改，因此需要第二个更改检测周期。

constructor(private readonly cdr: ChangeDetectorRef) {}

add(formControl) {
  (this.formGroup.get('array') asFormArray).push(formControl);
  this.cdr.detectChanges();
}