如何访问 HTML 中的 formGroup 以传递给动态添加的组件 [英] How to access a formGroup in HTML to pass to a component added dynamically
问题描述
我正在使用一些配置创建一个动态表单
我正在关注 Todd Motto 的博客链接
以下是我的表格
它包含嵌套的 FormGroups所以我的配置包含许多部分.Section包含多个fieldGroup,fieldGroup可以包含多个字段
这些字段是formControl,我正在传递[组](参见ng-container)对于这个组,我想通过 formGroup.现在我只传递一个字符串
</md-tab>
</md-tab-group><按钮>提交按钮></表单>
这是我的 component.ts
ngOnInit(): void {this.form = this.createForm();控制台日志(this.form);}创建表单(){const group = this.fb.group({});this.config.sections.forEach(section=>group.addControl(section.title,this.addFieldGroups(section)));返回组;}addFieldGroups(section): FormGroup{const group = this.fb.group({});section.fieldGroups.forEach(fieldGroup=>group.addControl(fieldGroup.name,this.addFieldGroup(fieldGroup)));返回组;}addFieldGroup(fieldGroup): FormGroup{const group = this.fb.group({});fieldGroup.fields.forEach(field=>group.addControl(field.name, this.createControl(field)));返回组;}创建控制(配置){const { 禁用,验证,值 } = 配置;return this.fb.control({ disabled, value }, 验证);}
嗯,我没有得到任何答案,所以这就是我所做的
在 ng-container 中的 HTML
[group]="getFormGroup(section.title,fieldGroup.name)"`
所以我正在调用一个传递字符串的函数
这就是我检索 formGroup 的方式
getFormGroup(sectionName,fieldGroupName){var section = this.myForm.controls[sectionName] as FormGroup;var fieldGroup =section.controls[fieldGroupName];返回字段组;}
I am creating a dynamic form using some configuration
i am following a blog by Todd Motto Link
Following is my form
It contains nested FormGroups so my config contain a number of section. Section contains a number of fieldGroup and fieldGroup can contain a number of fields
these fields are formControl, to this i am passing [group] (see ng-container) to this group i want to pass formGroup. Right now i am passing just a string
<form
class="dynamic-form"
[formGroup]="form"
(submit)="handleSubmit($event)">
<md-tab-group>
<div *ngFor="let section of config.sections" >
<md-tab label={{section.title}} formGroupName={{section.title}}>
<div *ngFor="let fieldGroup of section.fieldGroups" >
<div class="card-block card mb-3" formGroupName={{fieldGroup.name}}>
<ng-container *ngFor="let field of fieldGroup.fields;" dynamicField [config]="field" [group]="fieldGroup.name">
</ng-container>
</div>
</div>
</md-tab>
</div>
</md-tab-group>
<button>Submit</button>
</form>
and this is my component.ts
ngOnInit(): void {
this.form = this.createForm();
console.log(this.form);
}
createForm(){
const group = this.fb.group({});
this.config.sections.forEach(section=>group.addControl(section.title,this.addFieldGroups(section)));
return group;
}
addFieldGroups(section): FormGroup{
const group = this.fb.group({});
section.fieldGroups.forEach(fieldGroup=>group.addControl(fieldGroup.name,this.addFieldGroup(fieldGroup)));
return group;
}
addFieldGroup(fieldGroup): FormGroup{
const group = this.fb.group({});
fieldGroup.fields.forEach(field=>group.addControl(field.name, this.createControl(field)));
return group;
}
createControl(config) {
const { disabled, validation, value } = config;
return this.fb.control({ disabled, value }, validation);
}
Well i didnt get any answer so this is what i have done
in HTML in ng-container
[group]="getFormGroup(section.title,fieldGroup.name)"`
so i am calling a function passing the strings
and this is how i am retrieving formGroup
getFormGroup(sectionName,fieldGroupName){
var section = this.myForm.controls[sectionName] as FormGroup;
var fieldGroup =section.controls[fieldGroupName];
return fieldGroup;
}
这篇关于如何访问 HTML 中的 formGroup 以传递给动态添加的组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!