如何创建仅包含其所选控件的字符串标签的表单数组

Question

我正在设计表单的复选框区域，该区域提示用户有空与导师会面。这些复选框由FormArray进行控制。我正在订阅FormBuilder服务来创建它。该区域底部的“ STATE”仅用于测试目的：它显示FormArray的值。

.ts

preferences: this.formBuilder.group({
    availability: this.formBuilder.array(
      this.menteeFormService.getPreferenceData()[0].choices.map(() => {
        return this.formBuilder.control(false);
      }),
      { validators: Validators.required, updateOn: 'change' }),
  }, { validators: Validators.required, updateOn: 'submit' })

.html

<div *ngFor="let field of preferenceData">
    <h2><b>{{ field?.label }}</b></h2>
      <label *ngFor="let control of preferences.controls.availability.controls; let i = index"
        class="block" formArrayName="{{ field?.controlName }}">
        <p-checkbox [formControlName]="i" binary="true" label ="{{ field?.choices[i] }}"></p-checkbox>
      </label>
  </div>

为清除任何混乱，所有信息都从单独的Typescript类中的JSON模型中提取。 标签是复选框上方显示的文本， controlName 与类中的formControlName相关，而 choices 是每个复选框旁边的文本。 / p>

model.ts

export class PreferencesModel {
preferences: PreferenceData[] = [
    {
        label: 'Availability (check all that apply)',
        controlName: 'availability',
        choices: [
            'Before 8 A.M.',
            'Between 8 A.M. and 12 P.M.',
            'Lunch',
            'Between 12 P.M. and 4 P.M.',
            'After 4 P.M.'
        ]
    }
];

}

用户完成表单后，所有信息都将通过HTTP POST发送到后端。我目前正在通过发送 form.value

我不是发送一个布尔数组，而是要发送回一个仅包含所选复选框旁边的标签字符串值的数组。在上面的屏幕截图中，选中了中间的3个复选框，因此我希望FormArray的值计算为

[[“上午8点至下午12点之间”，“午餐”，“下午12点至下午4点之间”]

代替

[false，true，true，true，false]