如何在 Angular 中将动态数量的复选框附加 ngModel?

Question

我有一个列表，其中包含动态数量的复选框，每个复选框都有id属性。

<li *ngFor='let i of someArray'>
<input type="checkbox" id={{i}}>
</li>

我可以将每个输入复选框分配给这些变量，如果它们以前由 [(ngModel(] 知道

。但是如何在保留双向绑定概念的同时将复选框的动态数量与变量附加。

我正在使用@angular/核心 2.4.10。

Answer 1

你必须为此使用FormArray。

import {FormGroup} from '@angular/forms';
constructor(private fb: FormBuilder) {}
public form: FormGroup = this.fb.group({
checkboxes: this.fb.array([])
});

然后，您可以从控件循环：

<li *ngFor='let control of form.checkboxes.controls; let i = index'>
<input type="checkbox" id={{i}} [formControl]="control">
</li>

然后你可以通过执行this.form.get('checkboxes').value来获取值。

Answer 2

与@Chrillewoodz所说的不同，您不会被迫使用表单数组，尽管我建议您使用它。否则你可以做

<li *ngFor='let box of someArray; let i = index'>
<input type="checkbox" [id]="box" [(ngModel)]="someArray[i]">
</li>

Answer 3

当您不知道将存在多少控件或窗体中有动态元素时，可以使用 FormArray。

FormArray在这个stackoverflow答案中有很好的解释