Angular2 - 反应形式和多个复选框行为不正确

Question

我仍在学习响应式表单，并且我希望为数组属性（例如爱好）设置多个复选框。所以我将组定义如下

this.myForm = this.fb.group({

    name: ['', Validators.required],

    hobbies: this.fb.array([])

});

Hobbies 是一个数组：hobbies = ['Cooking', 'Swimming', 'Hiking', 'Dancing'];

现在，在 HTML 中，我将复选框定义如下：

<div>
  <span *ngFor="let hobby of hobbies">
    <label>
      <input type="checkbox" [value]="hobby" (click)="addToHobby(hobby)"> {{hobby}}
    </label>  
    <br />
  </span>
</div>

现在，当检查一个元素时，它根本不会将它添加到 hobbies 属性中，它只是复制了实际的 HTML 元素。我做错了什么？

这是代码：https://plnkr.co/edit/j8V189VoWKvloNgwOr7p?p=preview

Answer 1

好的，我设法让一些工作正常进行。链接在下面，但首先，这是我的思路。

首先，我们只需要定义一个包含所有值的数组，可能我们从 Web 服务中获取它，但我仍然像这样模拟它们：

hobbies = [new Hobby(1, 'Cooking'), new Hobby(2, 'Swimming'), new Hobby(3, 'Hiking'), new Hobby(4, 'Dancing')]; 我也特意添加了 id，所以它会更准确地模仿现实世界。现在，我们需要定义表单。由于多复选框不起作用，我决定表示一个单独的复选框数组，每个复选框都有几个属性，但至少有两个是必需的：决定数组中的复选框是否被选中的布尔值和一个名称，以便我们知道我们正在选择什么。

为了实现这一点，我们首先需要创建一个适合表单的数组，操作如下：

let hobbiesArray = [];

for (let hobby of this.hobbies) {
  hobbiesArray.push(this.fb.group({
    isChosen: false,
    name: hobby.hobbyName,
    id: hobby.id
  }));
}

很明显，我为每个爱好创建了新的fb.group，它们都放在一个数组中。然后使用这个数组来创建表单，如下：

this.myForm = this.fb.group({
  hobbiesList: this.fb.array(hobbiesArray)
});

现在我们有了fb.groups 中的fb.array。现在，当谈到 HTML 时，我有几个问题。 逻辑是“通过myForm.hobbiesList 并操作isChosen，同时保持name 只读 - 有点。这是代码。

<div formArrayName="hobbiesList">
  <div *ngFor="let hobby of hobbiesList.controls; let i=index" [formGroupName]="i" >
    <input type="checkbox" formControlName="isChosen" /> {{hobby.controls.name.value}}
  </div>
</div> 

这是我的担忧：我可以像这样称呼这个名字吗：{{hobby.controls.name.value}}？这有什么害处？我是否违反了任何 Angular2/4 规则？

好的，所以，当确认选择的爱好时，我们得到带有名称和ids（没有isChosen值）的实际数组，如下所示：

submitMe(): void {
    let items = this.myForm.value;
    this.mySelectedHobbies = items.hobbiesList.filter(x => x.isChosen).map(x => { return { name: x.name, id: x.id }; });
}

是的，这是我的设计。我不确定这是否允许我所做的一切，但我发现这是解决问题的最简单方法。大家觉得呢？

这是代码：https://plnkr.co/edit/8OKiQMK788R2uCt2OWzm?p=preview