Question

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

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

我可以将[（ngModel）]之前已知的每个输入复选框分配给那些许多变量。

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

我正在使用@ angular / core 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说的不同，你并没有被迫使用Form Array，尽管我建议你使用它。否则你可以做

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

Answer 3

当您不知道将出现多少控件或表单中有动态元素时，可以使用

FormArray。

FormArray在此stackoverflow answer

中得到了很好的解释

如何在Angular中附加具有动态数量的复选框的ngModel？

3 个答案: