angular - PrimeNG skupina zaškrtávacích políček s reaktivním formulářem - Jak získat všechny zaškrtnuté hodnoty

Mám skupinu elementů <p-checkbox> (PrimeNG), všechny sdílejí atribut name a atribut formControlName. Hodnota formulářového kontrolu je pole (jak by měla být), ale „pamatuje si“ pouze poslední zaškrtnuté políčko.

TS :

import { Component, OnInit } from '@angular/core';
import { MenuItem } from 'primeng/api';
import {
  FormGroup,
  Validators,
  FormControl,
  FormBuilder,
} from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  constructor(private formBuilder: FormBuilder) {}

  searchForm: FormGroup;

  ngOnInit() {
    this.searchForm = this.formBuilder.group({});
    this.searchForm.addControl('selectedCities', new FormControl([]));
  }
}

HTML :

<h5>Basic</h5>
<form [formGroup]="searchForm">
  <h5>Multiple</h5>
  <div class="p-field-checkbox">
    <p-checkbox
      name="group1"
      value="New York"
      formControlName="selectedCities"
      inputId="ny"
    ></p-checkbox>
    <label for="ny">New York</label>
  </div>
  <div class="p-field-checkbox">
    <p-checkbox
      name="group1"
      value="San Francisco"
      formControlName="selectedCities"
      inputId="sf"
    ></p-checkbox>
    <label for="sf">San Francisco</label>
  </div>
  <div class="p-field-checkbox">
    <p-checkbox
      name="group1"
      value="Los Angeles"
      formControlName="selectedCities"
      inputId="la"
    ></p-checkbox>
    <label for="la">Los Angeles</label>
  </div>
  <div class="p-field-checkbox">
    <p-checkbox
      name="group1"
      value="Chicago"
      formControlName="selectedCities"
      inputId="ch"
    ></p-checkbox>
    <label for="ch">Chicago</label>
  </div>
</form>

<p *ngFor="let city of searchForm.get('selectedCities').value">{{ city }}</p>

Můj projekt StackBlitz: https://stackblitz.com/edit/primeng-checkbox-demo-23nqc7?file=src%2Fapp%2Fapp.component.ts

Odpověď č. 1

Z oficiální dokumentace (sekce Model Driven Forms) se navrhuje svázat instanci formControl místo atributu formControlName.

<!-- Wrong -->
<p-checkbox formControlName="cities"></p-checkbox>

<!-- Correct -->
<p-checkbox [formControl]="myFormGroup.controls['cities']"></p-checkbox>

<p-checkbox
  name="group1"
  value="New York"
  [formControl]="searchForm.get('selectedCities')"
  inputId="ny"
></p-checkbox>

Demo @ StackBlitz