Angular 递归和嵌套响应式表单始终有效，即使它不是

Question

我正在使用 Angular 构建递归响应式表单。 STACKBLITZ HERE

该表单按预期工作得很好。但是，由于我正在递归/动态地构建它，用户可以无限地构建和嵌套 FormArrays 和 FormGroups，所以我使用子组件。到目前为止，主要有 3 个组件：

1. AppComponent：主要的父组件
2. GroupControlComponent：父级的子级。处理所有组对象
3. ConditionFormComponent：GroupControlComponent 的子组件。照顾组内的所有条件

这是一个基本对象的样子：

{
  // appcomponent level
  "statement": {
    //groupcontrol level
    "groups": [
      {
        // conditionform level
        "conjunctor": null,
        "conditions": [
          {
            "variable": null
          }
        ],
        "groups": []
      }
    ]
  }
}

当我设置验证时，我希望一切都是必需的。所以我通过 FormBuilder，在父组件和子组件上，并在所有表单控件上将 Validators.required 设置为 true。

经过之后，我返回并使用这种方法构建了一个表单，并且表单始终返回 true，即使它不是。有没有办法确定子组件在动态创建的带有子组件的表单上是否有效？

如果您想了解更多关于这个特定场景的信息，这里有一些其他 StackOverflow 问题，这些问题涉及构建和让表单以递归方式工作：

Cannot Find Control with Path Using ngIf on Recursive Angular Form

Angular Deeply Nested Reactive Form: Cannot find control with path on nested FormArray

Answer 1

您没有“递归 Angular 表单”，您的组件 group-component 是一个自定义表单控件，所以您的 _form 实际上是一个带有 formGroup 的 formGroup 和一个 FormControls 的 FormArray - 不是一个带有 FormGroups 的 formArray-

是的，数组中的formControls存储对象，但仅此而已。如果你想检查更改函数_addGroup by

 _addGroup() {
    this._groupsFormArray.push(
      this.fb.control('')
    );
  }

你会发现一切都和以前一样。

重新考虑您的 app-group-control 以创建一个简单的组件，该组件接收为 @Input 数组的自己的 FormGroup，有些像

@Input() formGroup:FormGroup

在父级中：

<ng-container *ngFor="let group of _groupsFormArray?.controls; index as i">
        <app-group-control 
            [formGroup]="_groupsFormArray.at(i)"
        </app-group-control>
</ng-container>