时间戳

首页 > 解决方案 > Angular 6 Reactive Forms 动态复选框

angular - Angular 6 Reactive Forms 动态复选框

问题描述

对于我的生活，我无法弄清楚如何让 Angular 6 Reactive 表单与动态复选框配合得很好。我将尝试发布一个简单的 senario。

假设我有一个 AJAX 调用，它返回以下类型的数据

{
    "name": "Name1",
    "items": [{type: "banna"}, {type: "apple"}]
},
{
    "name": "Name2",
    "items": [{type: "orange"}, {type: "strwberry"}]
}

我只是想在屏幕上添加 4 个复选框（我可以通过多种方式进行操作），但我不知道如何使用响应式表单将它们插入

假设它是数据库中的现有记录，我还需要重新水化表单

在这个星球上怎么能做到这一点？任何例子都可以

标签： angular

解决方案

表单的模型不必与对象的结构完全匹配。

您需要做的就是创建适当的结构，以便使用复选框轻松编辑它，然后，当您提交表单时，将其转换为您想要的结构。

编辑前先变换

{
    "name": "Name1",
    "items": [{type: "banana"}, {type: "apple"}]
}

进入

{
    "name": "Name1",
    fruits: {
        banana: true,
        apple: true,
        strawberry: false,
        orange: false
    }
}

如果原始对象中存在该类型的项目，则将每个水果设置为 true。

将复选框映射到这 4 种水果现在很简单，因为复选框的值是真或假。

假设用户通过选中/取消选中复选框来编辑对象，从而将其变成

{
    "name": "Name2",
    fruits: {
        banana: false,
        apple: true,
        strawberry: true,
        orange: false
    }
}

现在提交时，您只需将该结构转换回您想要的：

{
    "name": "Name2",
    "items": [{type: "strawberry"}, {type: "apple"}]
}

通过遍历水果的键，过滤那些为真的，并将该类型的项目添加到项目数组中。

推荐阅读