Добавить флажок динамически, используя угловой 2 - PullRequest
Новая
       9

Добавить флажок динамически, используя угловой 2

0 голосов
/ 01 мая 2018

Я новичок в angular и в настоящее время использую angular 5. Я хочу добавить флажок и раскрывающийся список при нажатии кнопки () с помощью элемента управления Reactive form. Пожалуйста, предложите решение.

1 Ответ

0 голосов
/ 01 мая 2018

Ваш 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 с FormArray, называемым элементами, определенными в нем. 

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

Приведенный ниже код является свойством геттера для легкого доступа. 

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

Примечание. Я не пробовал, поэтому исправьте синтаксис по мере необходимости.

...