使用 angular 动态添加复选框 2

Question

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

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，其中定义了一个名为 items 的 FormArray。

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

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

使用 angular 动态添加复选框 2

Add checkbox dynamically using angular 2

angular2-forms

angular2-template

angular

angular-reactive-forms