angular - 遍历包含表单数组的表单组
问题描述
我正在创建一个具有以下结构的动态模型驱动表单:
export class AppComponent {
data = {
companies: [
{
company: "example comany",
projects: [
{
projectName: "example project",
}
]
}
]
}
myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
companies: this.fb.array([])
})
this.setCompanies();
}
setCompanies() {
let control = <FormArray>this.myForm.controls.companies;
this.data.companies.forEach(x => {
control.push(this.fb.group({
company: x.company,
projects: this.setProjects(x) }))
})
}
setProjects(x) {
let arr = new FormArray([])
x.projects.forEach(y => {
arr.push(this.fb.group({
projectName: y.projectName
}))
})
return arr;
}
}
下面是模型结构,在 Observable 中我从后端接收数据:
export class Companies{
company : String;
companyRegNo : String;
projects : Project[];
}
export class Project{
projectName : String;
projectRegNo : String;
}
我的“myForm”FormGroup
变量中有一些 json 数据,其中包含公司和项目名称的信息。我需要在这个 json 中进行一些更新,但myForm
我可以使用原始的 json 数据。
因此,我正在创建另一个FormGroup
变量myForm2
并myForm
为其赋值:
myForm2: FormGroup;
this.myForm2 = this.myForm;
现在,我希望将company
值替换为companyRegNo
值,并将projectName
值替换为projectRegNo
值,保持键company
并projectName
保持原样,在 myForm2 中。
我已经有 2 种方法,getProjectRegNoFromProjectName()
并且getCompanyRegNoFromCompanyName()
可以使用,它们分别在传递and时返回projectRegNo
and 。我需要在对 myForm2 进行迭代时调用这两种方法。我现在如何迭代数据本身,以便我可以更新分配的属性和值,如前所述?companyRegNo
projectName
company
myForm2
FormArray
解决方案
您是否尝试过使用 patchValue?就像是 :
(<any>Object).values(formGroup.controls).forEach(control => {
control.patchValue(value);
//Patch Your value here}
推荐阅读
- python - 如何让 p5(用 Python 处理)在 Google Colab 中显示?
- django - Django模板更新不刷新
- java - 我正在为我的后端使用 Spring Boot 框架。使用 mysql 作为数据库,使用 tomcat 作为 Web 服务器 War 文件不起作用
- r - 使用用户生成的函数对数据框的 2 列进行排序,使 1 列的值小于相应列
- google-apps-script - 将 OLDVALUE 复制到新的 CELL
- reactjs - express 如何为 React App 提供 index.html 以及如何修改它?
- python - 如何在忽略空行的情况下计算一列中的单词数
- javascript - 上传文件前带有预览 PDF 的 Vue + Element UI
- c# - 了解列表中的枚举器
- python - 如何在 Python 中打印上标