PrimeNG复选框组结合响应式表单：如何获取所有选中值？

一组共享name与formControlName属性的<p-checkbox>元素，表单控件预期返回选中值的数组，但目前仅能记录最后点击的复选框的值。

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>

解决方案 #

问题出在PrimeNG <p-checkbox>的默认配置上：组件默认binary="true"，此时控件会以布尔值形式返回状态，而非将选中项的value加入数组。当多个复选框绑定同一个FormControl时，每次点击都会覆盖之前的值，最终仅保留最后一次操作的结果。

只需给每个<p-checkbox>添加binary="false"属性，即可让组件切换到非二进制模式，自动将选中项的value收集到绑定的数组FormControl中：

修改后的单个复选框示例：

<p-checkbox
  name="group1"
  value="New York"
  formControlName="selectedCities"
  inputId="ny"
  binary="false"
></p-checkbox>

全部修改后，<p-checkbox>组会正确将所有选中的城市名称收集到selectedCities数组中，页面下方的循环也会正确渲染所有选中项。

内容的提问来源于stack exchange，提问作者Vladimir Makhnovsky