Angular 6 Reactive Forms 动态复选框答案

【问题标题】：Angular 6 Reactive Forms Dynamic checkboxesAngular 6 Reactive Forms 动态复选框
【发布时间】：2023-04-06 13:47:01
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

复选框应该/做什么？您尝试过什么，具体问题是什么？
他们需要将值添加到数组中。像[“香蕉”，“苹果”]。基于所选值。我试过用这个来搞定一个痣。目前我正在尝试构建一个动态添加表单组和表单控件的表单数组。无济于事
所以你想编辑你在问题中显示的对象之一（不是两个），并且你希望你的表单有 4 个复选框：香蕉、苹果、草莓和橙子，如果你检查香蕉和橙色，那么对象必须有两个项目，一个是香蕉类型，一个是橙色类型。对吗？

标签： angular

【解决方案1】：

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

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

编辑前，变换

{
    "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"}]
}

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

【讨论】：

有趣。转换 json 后，创建表单的正确方法是什么？带有一组表单控件的 FormGroup？这就是我感到困惑的部分
您可以直接在主表单组中或嵌套表单组内使用名为香蕉、苹果、草莓和水果的 4 个表单控件。
查看stackblitz.com/edit/… 以获取实时示例。
JB 非常感谢......你不仅解释了它，你的 stackblitz 也很完美。就在钱上。非常感谢

【解决方案2】：

在您的模板文件中，确保您在布尔类型的复选框上有一个 ngModel 双向绑定

  <mat-checkbox [(ngModel)]="isSubscribed[0].isChecked" color="accent">{{items[0].type}}</mat-checkbox>

编辑您的数据结构以包含这些复选框的值

{
    "name": "Name1",
    "items": [{type: "banana", isChecked: false}, {type: "apple", isChecked: false}]
},
{
    "name": "Name2",
    "items": [{type: "orange", isChecked: false}, {type: "strawberry", isChecked: false}]
}

【讨论】：