Как мы устанавливаем динамические флажки для проверки на основе значения из базы данных в реактивных формах angular?

Я новичок в реактивных формах и изо всех сил пытаюсь установить для значения флажков значение true динамически. Вот пример: я получаю предварительно выбранные значения фруктов для конкретного пользователя из базы данных, и эти фрукты необходимо проверять, когда пользователь загружает страницу.

Я использую следующий html-код:

<ng-container>
<div class="form-check form-check-inline" style="display: block;" *ngFor="let control of fruitsArray.controls; let i = index;">
  <input *ngIf="i<11" class="form-check-input" [formControl]="control" type="checkbox" id="inlineCheckbox{{i}}" [checked]="fruitsCheck[i].checked">
  <label *ngIf="i<11" class="form-check-label" for="inlineCheckbox{{i}}">{{fruitsCheck[i].label}} <br /></label>
</div>

FruitCheck - это массив объектов, который содержит метку и проверенное значение, как показано ниже:

fruitsCheck : Array<{label: string, checked: boolean}> = [];

FruitCheck может содержать такие значения, как:

0: {label: "Apple", checked: true},
1: {label: "Orange", checked: false},
2: {label: "Pineapple", checked: true},
3: {label: "Kiwi", checked: false}

Используя приведенный выше код, я могу просто установить соответствующие флажки как отмеченные, но, однако, после проверки значения конкретного элемента управления флажком оно все равно отображается как false. Я бы хотел, чтобы не только флажок был установлен, но и значение элемента управления было установлено на true.

Я читал о patchValue, но не знаю, как использовать его для установки значения для динамических флажков. Заранее благодарю за любую помощь!


angular checkbox angular-reactive-forms reactive-forms
person Ash    schedule 30.10.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вот рабочий пример заполнение списка флажков в реактивной форме.

import { Component, OnInit } from "@angular/core";
import { FormArray, FormBuilder, FormGroup } from "@angular/forms";
import { take } from "rxjs/operators";
import { DataService } from "./data.service";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  public fruitsForm: FormGroup;

  get fruitsArray() : FormArray {
    return this.fruitsForm.get('fruits') as FormArray
  } 

  constructor(private dataService: DataService, private fb: FormBuilder) {}

  ngOnInit(): void {
    this.dataService
      .getFruits()
      .pipe(take(1))
      .subscribe(fruits => {
        this.fruitsForm = this.fb.group({
          name: "Joe Bloggs",
          fruits: this.fb.array(fruits.map(f => this.fb.group(f)))
        });
      });
  }
}

HTML

<ng-container *ngIf="fruitsForm">
    <form [formGroup]="fruitsForm">
        <input name="name" formControlName="name" />
        <div formArrayName="fruits">
            <div *ngFor="let fruit of fruitsArray.controls; let i = index" [formGroupName]="i">
                <input type="checkbox" formControlName="selected" />
                <label>{{fruit.value.name}}</label>
            </div>
        </div>
    </form>
    <br />
    <div>{{fruitsForm.value | json}}</div>
</ng-container>

Мы смоделировали выборку из базы данных с помощью службы и оператора RxJS delay.

import { Injectable } from "@angular/core";
import { Observable, of } from "rxjs";
import { delay } from "rxjs/operators";

interface Fruit {
  id: number;
  name: string;
  selected: boolean;
}

@Injectable()
export class DataService {
  constructor() {}

  public getFruits(): Observable<Fruit[]> {
    return of([
      {
        id: 1,
        name: "Apple",
        selected: true
      },
      {
        id: 2,
        name: "Pear",
        selected: false
      },
      {
        id: 3,
        name: "Orange",
        selected: false
      }
    ]).pipe(delay(250));
  }
}

Мы используем службу FormBuilder для создания нашей формы.

Мы объединяем наши элементы управления в FormGroup под названием fruitsForm.

В нашем FormGroup fruits - это FormArray, допускающий множество входных данных.

Каждый объект Fruit отображается на новый FormGroup, и каждое свойство в нашем объекте Fruit будет преобразовано в FormControl.

Геттер fruitsArray предназначен для облегчения доступа к нашему свойству формы.

Чтобы связать наш шаблон с FormArray, мы используем директиву formArrayName.

Директива formGroupName использует индекс, чтобы найти правильный FormGroup в нашем fruits FormGroup. Чтобы связать наш флажок с элементом управления selected, мы используем директиву formControlName.

person Crafted Pod    schedule 30.10.2020