如何在不影响其功能的情况下在表单数组中添加无效的表单控件

Question

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

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

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

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ng-valid: true'. Current value: 'ng-valid:false'

在控制台中。

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

Answer 1

您只需在添加无效子表单后手动调用更改检测即可。更改检测有效 top-down。根据该错误判断，当单击按钮（或您用来添加新表单的任何内容）更改检测周期运行时，它已经在到达新添加的无效子表单时检查了表单有效性。在添加新表单后手动调用它会告诉 Angular 需要第二个更改检测周期，因为更高层元素中的表达式很可能已更改。

constructor(private readonly cdr: ChangeDetectorRef) {}

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

如何在不影响其功能的情况下在表单数组中添加无效的表单控件

How can I add a invalid Form Control in a Form Array without compromise its funcionality

angular2-forms

angular