[英]Angular 2 | nested arrays in reactive form with dynamically built components
我想在angular 2中建立一个反应式表单,并让表单组件动态生成。 我找到了一些很棒的教程,介绍如何使用简单的表单来完成此操作:
https://toddmotto.com/angular-dynamic-components-forms
https://juristr.com/blog/2017/10/demystify-dynamic-angular-forms/
但是当数据模型包含字符串或对象数组时,我似乎无法弄清楚如何实现此目的。 例如,考虑具有以下结构的对象:
{
'name': 'Big Name Hotel',
'tags': [
'clean',
'cozy',
'cheap'
],
'locations': [
{
'city': 'Denver',
'state': 'CO',
},
{
'city': 'San Francisco',
'state': 'CA',
},
{
'city': 'Los Angeles',
'state': 'CA',
}
]
}
我可以使用上述教程之一为name元素构建一个动态表单组件,但是如何使它与字符串数组(标签)和对象数组(位置)一起使用?
===编辑更多上下文===
这是其中一个教程的config数据结构:
config = [
{
type: 'input',
label: 'Full name',
name: 'name',
placeholder: 'Enter your name',
},
{
type: 'select',
label: 'Favourite food',
name: 'food',
options: ['Pizza', 'Hot Dogs', 'Knakworstje', 'Coffee'],
placeholder: 'Select an option',
},
{
label: 'Submit',
name: 'submit',
type: 'button',
},
];
字符串数组或对象数组的数据结构是什么样的?
我认为(目前无法测试)可以将数组映射到FormArray中 。
const form = new FormGroup({
tags : new FormArray(tags.map(tag => new FormControl(tag)))
});
使用FormBuilder ,
constructor(
private fb: FormBuilder
) { }
createForm() {
...
this.form= this.fb.group({
name: [this.data.name],
...
locations: this.fb.array([])
});
const locationsFGs = this.data.locations.map(loc=> {
return this.fb.group({
city: [loc.city, Validators.required],
state: [loc.state],
});
});
const locationsFormArray: FormArray = this.fb.array(locationsFGs );
this.form.setControl('locations', locationsFormArray);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.