Question

我想以模型驱动形式显示Prime NG复选框。但是，我不知道确切的语法。根据{{3}}。我应该添加（为简单起见，我没有创建循环）

   <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在反应形式上显示复选框

1 个答案: