Angular 使用带有 CVA 的嵌套 Reactive Forms 的动态解析组件不工作
Angular Dynamically resolved components using nested Reactive Forms with CVA's are not working
哎呀,使用 ReactiveForms 动态构建组件时遇到问题。
需要触发和 Mat-Dialog 并在其中加载一组组件 - 工作正常。
需要从 映射数组 动态构建一些组件 - 工作正常。
需要使用 CVA(控制值评估器) 构建嵌套反应表单 - 这就是问题所在。
我有一个使用 CVA 的工作嵌套表单,可以正确更新表单数据......除非我动态构建组件。如果我使用动态组件,它们将在表单更新中被忽略。不知道如何解决这个问题。我的应用程序将是非常复杂的表单网络,因此需要解决这个问题!
我使用了 Angular.io 动态组件指南。
Angular.io - resolve dynamic components
并遵循本 CVA 实施指南
有人有什么想法吗??
Stackblitz 出现问题,因此将代码推送到 gitHub
我们可以使用 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>
哎呀,使用 ReactiveForms 动态构建组件时遇到问题。
需要触发和 Mat-Dialog 并在其中加载一组组件 - 工作正常。 需要从 映射数组 动态构建一些组件 - 工作正常。 需要使用 CVA(控制值评估器) 构建嵌套反应表单 - 这就是问题所在。
我有一个使用 CVA 的工作嵌套表单,可以正确更新表单数据......除非我动态构建组件。如果我使用动态组件,它们将在表单更新中被忽略。不知道如何解决这个问题。我的应用程序将是非常复杂的表单网络,因此需要解决这个问题!
我使用了 Angular.io 动态组件指南。
Angular.io - resolve dynamic components
并遵循本 CVA 实施指南
有人有什么想法吗?? Stackblitz 出现问题,因此将代码推送到 gitHub
我们可以使用 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>