Question

在我生命中，我无法弄清楚如何使Angular 6 Reactive表单与动态复选框配合使用。我将尝试发布一个简单的senario。

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

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

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

我还需要对表单进行补水，前提是表单是数据库中的现有记录

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

Answer 1

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

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

编辑之前，先进行转换

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

进入

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

通过在原始对象中有每种水果的情况下将每个水果设置为true。

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

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

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

现在，提交时，您只需要将该结构转换回所需的内容即可

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

遍历水果的键，过滤出真实的水果，并将该类型的商品添加到商品数组中。

Answer 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}]
}

Angular 6反应形式动态复选框

2 个答案: