Блог

Я новичок в реактивных формах и изо всех сил пытаюсь динамически устанавливать значение флажков в 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>
  

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

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

fruitsCheck будет содержать такие значения, как:

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

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

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

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

 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 для создания нашей формы.

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

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

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

Средство fruitsArray получения должно упростить доступ к нашему свойству формы.

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

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