使用角度2动态添加复选框

Question

我是角色新手，目前正在使用角度5我想使用反应式表单控件添加复选框和下拉列表上的click事件（）。请提出解决方案。

Answer 1

您的html模板应如下所示：

<div formArrayName="items" *ngFor="let item of items.controls; let i=index">
    <div [formGroupName]="i" class="well">
        <input type="checkbox" formControlName="isChecked" />
    </div>
    <div *ngIf="isChecked.invalid && (isChecked.dirty || isChecked.touched)"
          class="alert alert-danger">
        <div *ngIf="isChecked.errors.required">
            Checkbox is required.
        </div>
    </div>
</div>
<button type="button" (click)="addItem()">Add Item</button>

组件文件应该包含一个FormGroup，其中包含一个名为itemsArray的项目。

 this.formGroup = this.formBuilder.group({
          items: this.formBuilder.array([])
 })

以下代码是一个getter属性，便于访问。

get items(): FormArray {
    return this.formGroup.get('items') as FormArray;
}

点击时添加复选框。

private addItem(): void {
    this.items.push(this.buildItem());
}

private buildItem(): FormGroup {
    return this.formBuilder.group({
          id: [''],
          isChecked: [false, Validators.required],
    });
}

注意：我没有尝试过，所以请根据需要更正语法。