Question

以前，在过去，我们在输入名称中使用[]将复选框列表数据作为数组发送到PHP服务器

<form action="#" method="post">
    <input type="checkbox" name="check_list[]" value="C/C++"> C/C++
    <input type="checkbox" name="check_list[]" value="Java"> Java
    <input type="checkbox" name="check_list[]" value="PHP"> PHP
    <input type="submit" name="submit" value="Submit"/>
</form>

在服务器（PHP）中， check_list 将是一个数组

$_POST['check_list']; //an array, e.g.: [ 'Java', 'PHP']

现在，使用Angular4，我想有一个包含许多项目的问卷，每个项目都有很多复选框，例如：

Question1: What is your name?
           __________________

Question2: What fruits do you like?
    [ ] Banana
    [ ] Kiwi
    [ ] Durian

Question3: What animals do you like?
    [ ] Cat
    [ ] Dog
    [ ] Dolphin

如果我要在Angular4中以反应形式实现此表单，那么我需要使用form control

创建formBuilder

//note: "private fb: FormBuilder " is injected in the constructor
createForm() {
    this.heroForm = this.fb.group({
        q1: '',
        q2: this.fb.group({
            banana: false,
            kiwi: false,
            durian: false
        }),
        q3: this.fb.group({
            cat: false,
            dog: false,
            dolphin: false
        }),
    });
}

提交的表单结果可能如下所示：

{ q1:'Trump', q2:{banana:false, kiwi:true, durian:false}, q3:{cat:false, dog:true, dolphin: true} }

看起来很复杂，而且，我需要为每个复选框（即香蕉，猕猴桃......）分配自定义名称。

如果我在Angular4中使用 FormArray 方法，则提交的结果仍然很复杂。我需要一些建议，你如何动态生成一个表单，包含很多项目，而某些项目是复选框列表？

如果我能以下列方式获得结果，那将非常容易：

{ q1:'Trump', q2:['kiwi'], q3:['dog', 'dolphin'] }

但似乎我无法用Angular4做到...... :(

在Angular4中处理复杂复选框的 BEST WAY 是什么？ FormGroup 是否是Angular4中的唯一方法？

为什么Angular4团队不支持复选框列表的name='checkbox_name[]'表示法？我在这里错过了什么吗？处理复杂形式的新趋势是什么？有人可以解释一下吗？

如何处理复选框列表，复杂的形式像Angular4中的专业人士？

0 个答案: