angular - 使用 PrimeNG 在响应式(Reactive)表单上显示复选框

Question

我想以模型驱动的形式显示 Prime NG 复选框。但是，我无法弄清楚确切的语法。根据Docs .我应该添加(为简单起见，我没有创建循环)

   <p-checkbox [formControl]="myFormGroup.controls['selectedValues']"></p-checkbox>
   <p-checkbox [formControl]="myFormGroup.controls['selectedValues']"></p-checkbox>
   <p-checkbox [formControl]="myFormGroup.controls['selectedValues']"></p-checkbox> 

但我应该如何正确实现呢？目前我的想法是创建一个对象 FormObject selectedValues 作为 FormArray 应该在里面，我应该在复选框中调用该对象。

export class SignInComponent implements OnInit {
  signInForm: FormGroup;
  selectedValues: FormArray;

  ngOnInit() {
    this.signInForm = this.formBuilder.group({
      fullName: ['', [Validators.required]],
      lastName: '',
      ArrivalTime: '',
      selectedValues: ''
    });
  }}

Answer 1

另一种方法是使用列表框组件并设置这些选项 multiple="multiple"checkbox="checkbox"

但是你可以像这样使用复选框组件作为一组复选框

<div [formGroup]="signInForm">

   <p-checkbox [formControl]="signInForm.controls['options']" label="male" value="male">
   </p-checkbox>

   <p-checkbox [formControl]="signInForm.controls['options']" label="female" value="female">
   </p-checkbox>

   <div formArray="selectedValues">
     <div *ngFor="let fc of signInForm.get('selectedValues').controls;let option = index">
        <p-checkbox [formControl]="fc" [label]="option+1" binary="true"></p-checkbox>
     </div>
   </div>

</div>

组件

  ngOnInit() {
    this.signInForm = this.formBuilder.group({
      fullName: ['', [Validators.required]],
      lastName: '',
      ArrivalTime: '',
      selectedValues: new FormArray([
        this.formBuilder.control(false),
        this.formBuilder.control(false),
        this.formBuilder.control(false),
      ]),
      options:[]
    });

demo 🌟