时间戳

首页 > 解决方案 > 使用带有 CVA 的嵌套反应表单的 Angular 动态解析组件不起作用

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

问题描述

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

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

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

我已将 Angular.io 指南用于动态组件。

Angular.io - 解析动态组件

并遵循本指南进行 CVA 实施

深入 - 使用 CVA

有没有人有任何想法？Stackblitz 有问题，所以将代码推送到 gitHub

开发动态补偿问题

标签： angularreactive-formsangular-dynamic-componentscontrolvalueaccessor

解决方案

我们可以使用ControlContainer向父 FormGroup 注册子表单，而不是使用 CVA 使用子表单组件方法来创建应用程序内容表单。

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

内容.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])
    }));
  }
}

组件.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>

分叉的工作示例

推荐阅读