使用angular 2动态添加复选框 [英] Add checkbox dynamically using angular 2

问题描述

我是angular的新手，目前正在使用angular 5，因此我想使用Reactive表单控件在click event()上添加复选框和下拉列表.请提出解决方案.

I am new to angular and currently using angular 5 i want to add check box and drop down list on click event() using Reactive form control. Please suggest a solution.

推荐答案

您的html模板应如下所示:

Your html template should look something like below:

<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，该FormGroup中包含一个FormArray，称为其中定义的项.

Component file should contain a FormGroup with a FormArray called items defined in it.

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

下面的代码是用于轻松访问的getter属性.

The below code is a getter property for easy access.

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

要在点击时添加一个复选框.

To add a checkbox on click.

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

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

注意:我还没有尝试过，因此请根据需要更正语法.

这篇关于使用angular 2动态添加复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！