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

问题描述

我是 angular 的新手，目前正在使用 angular 5，我想使用反应式表单控件在单击事件()上添加复选框和下拉列表.请提出解决方案.

解决方案

您的 html 模板应如下所示:

<div [formGroupName]="i" class="well"><input type="checkbox" formControlName="isChecked"/>
<div *ngIf="isChecked.invalid && (isChecked.dirty || isChecked.touched)"class="警报警报-危险"><div *ngIf="isChecked.errors.required">复选框是必需的.

<button type="button" (click)="addItem()">添加项目</button>

组件文件应该包含一个 FormGroup，其中定义了一个名为 items 的 FormArray.

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

下面的代码是一个易于访问的 getter 属性.

get items(): FormArray {返回 this.formGroup.get('items') 作为 FormArray;}

点击时添加复选框.

private addItem(): void {this.items.push(this.buildItem());}私有 buildItem(): FormGroup {返回 this.formBuilder.group({ID: ['']，isChecked: [false, Validators.required],});}

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

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.

解决方案

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>

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

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

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],
    });
}

Note: I haven't tried it so correct the syntax as necessary.

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