Angular 使用带有 CVA 的嵌套 Reactive Forms 的动态解析组件不工作

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，而是使用子表单组件方法以这种方式创建应用程序内容表单

在子组件中注入 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

Angular 使用带有 CVA 的嵌套 Reactive Forms 的动态解析组件不工作

Angular Dynamically resolved components using nested Reactive Forms with CVA's are not working

angular

angular-reactive-forms

controlvalueaccessor

angular-dynamic-components