使用 PrimeNG 在反应式表单上显示复选框

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

使用 PrimeNG 在反应式表单上显示复选框

Display check box on reactive form using PrimeNG

primeng

angular