时间戳

首页 > 解决方案 > 具有动态字段的反应式表单嵌套 FormArray

angular - 具有动态字段的反应式表单嵌套 FormArray

问题描述

我将从后端获取项目列表及其爱好列表，用户应该能够编辑/添加。

let item of ['item1', 'item2', 'item3']

(ngSubmit) 值；

我想关注输出：

item1: {
hobbyList: Array[0]
name: null
}, 
item2: {
hobbyList: Array[0]
name: null
}, 
item3: {
hobbyList: Array[0]
name: null
}

我试过这样做但得到以下错误

ERROR
Error: Cannot find control with name: 'item1.hobbyList'
Unable to display error. Open your browser's console to view.

有没有其他方法可以实现这一点。

链接：到目前为止我已经尝试过 Stackblitz：https ://stackblitz.com/edit/angular-qsq3yb?file=src%2Fapp%2Fapp.component.ts

标签： angular

解决方案

如果要创建以下数组：

item1: {
    hobbyList: Array[0]
    name: null
}, 
item2: {
    hobbyList: Array[0]
    name: null
}, 
item3: {
    hobbyList: Array[0]
    name: null
}

那么你只需要使用map功能：

let fooArray = ['item1', 'item2', 'item3'];
let desiredArray = fooArray.map(a => {
    let obj = {};
    obj[a] = {
        hobbyList:[],
        name : ''
    };
    return obj;
});
console.log(desiredArray);

推荐阅读