使用带有 CVA 的嵌套反应表单的 Angular 动态解析组件不起作用

Question

啊，使用 ReactiveForms 动态构建组件时遇到问题。

需要触发和 Mat-Dialog 并在其中加载一组组件 - 工作正常。 需要从 映射数组 动态构建一些组件 - 工作正常。 需要使用 CVA（控制值评估器） 构建嵌套的反应式表单 - 这就是问题所在。

我有一个使用 CVA 的嵌套表单，可以正确更新表单数据……除非我动态构建组件。如果我使用动态组件，它们会在表单更新中被忽略。不知道如何解决这个问题。我的应用将是非常复杂的表单网络，所以需要弄清楚这一点！

我已经使用了 Angular.io 动态组件指南。

Angular.io - resolve dynamic components

并按照本指南进行 CVA 实施

In-Depth - using CVA's

有人有什么想法吗？ Stackblitz 有问题，所以将代码推送到 gitHub

dev-dynamic-comp issue

Answer 1

我们可以使用 ControlContainer 向父 FormGroup 注册我们的子表单，而不是使用 CVA 使用子表单组件方法来创建 app-content 表单。

在子组件中注入 ControlContainer 提供对父 FormGroup 的访问，然后我们可以使用 addControl 方法添加所需的表单控件。

content.component.ts

import { Component, forwardRef, OnInit } from '@angular/core';
import { AbstractControl, ControlContainer, ControlValueAccessor, FormControl, FormGroup, NG_VALIDATORS, NG_VALUE_ACCESSOR, ValidationErrors, Validators } from '@angular/forms';

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.scss']
})
export class ContentComponent implements OnInit {

  parent:FormGroup;
  constructor(private controlContainer:ControlContainer) { }

  ngOnInit(): void {
    this.parent = this.controlContainer.control as FormGroup;
     this.parent.addControl('contentInfoForm',new FormGroup({
      contentNotes: new FormControl("",[Validators.required]),
      contentData: new FormControl("", [Validators.required])
    }));
  }
}

component.html

<ng-container *ngIf="parent" [formGroup]="parent">
    <ng-container formGroupName="contentInfoForm">
        <div class="row">
            <label for="Content Notes"> Content Notes </label>
            <input type="text" formControlName="contentNotes" class="">
    </div>
            <div class="row">
                <label for="Content Data"> Content Data </label>
                <input type="text" formControlName="contentData" class="">
    </div>
    </ng-container>
</ng-container>

Forked Working Example