获取表单提交时所有 p-checkbox 的状态 (Angular PrimeNG)

Question

我的表单中每个字段旁边都有多个复选框，复选框数据不会保存。在提交表单之前，我必须弄清楚所有复选框都已选中。如果选中所有复选框，我将得到 true，否则为 false。我需要以动态方式进行，因为我的表单中有大量字段。鉴于我的 html 代码的某些部分...

                            <div class="ui-g-12 ui-md-12">
                                <div class="ui-g-12 ui-md-11">
                                    <span class="md-inputfield">
                                        <input type="text" pInputText 
                                    formControlName="sequenceOfTotal">
                                        <label>Sequence of Total(27)</label>
                                    </span>
                                </div>
                                <div class="ui-g-12 ui-md-1">
                                    <span class="md-inputfield">
                                        <p-checkbox binary="true">
                                        </p-checkbox>
                                    </span>
                                </div>
                            </div>

Answer 1

我不完全理解您的用例以及 "dynamic" 解决方案需要如何，但是由于您已经在使用 formBuilder，您可以在您的包含每个复选框值的表单（默认值为 false，Validators.required）。

例如：

// HTML
<p-checkbox [formControl]="this.form?.controls['checkboxes']?.controls['cb1']"></p-checkbox>
<p-checkbox [formControl]="this.form?.controls['checkboxes']?.controls['cb2']"></p-checkbox>
<p-checkbox [formControl]="this.form?.controls['checkboxes']?.controls['cb3']"></p-checkbox>

// TS
this.form = fb.group({
    sequenceOfTotal: [''],
    checkboxes: fb.group({
      cb1: [false, Validators.required],
      cb2: [false, Validators.required],
      cb3: [false, Validators.required],
    }),
});

然后，当您需要确保每个复选框都被选中时，您可以验证

this.form.controls.checkboxes.valid

当然，如果您当前正在使用 "this.form.value" 生成发送到后端的数据，那么您可以为复选框创建第二个表单或将您的表单组一分为二。

this.form = fb.group({
    data: fb.group({
      sequenceOfTotal: [''],
    },
    checkboxes: fb.group({
      cb1: [false, Validators.required],
      cb2: [false, Validators.required],
      cb3: [false, Validators.required],
    }),
});

并对您的模板/函数进行相应的更改。

Answer 2

@Beerbossa 我用另一种方式做了，正如我所说的，我的表格中有大量字段。我在 [(ngModel)] 中为每个复选框

取了一个数组并将数组元素设置为 false

basicCheckboxes: any[] = [];

setCheckBoxes() {
        for (let i = 0; i < 20; i++) {
            this.basicCheckboxes[i] = false;
        }
}

HTML部分：

    <div class="ui-g-12 ui-md-12">
         <div class="ui-g-12 ui-md-11">
               <span class="md-inputfield">
                    <input type="text" pInputText formControlName="sequenceOfTotal">
                    <label>Sequence of Total (27)*</label>
                </span>
          </div>
          <div class="ui-g-12 ui-md-1">
                <span class="md-inputfield">
                     <p-checkbox binary="true" [(ngModel)]="basicCheckboxes[17]"  
                           [ngModelOptions]="{standalone: true}">
                      </p-checkbox>
                 </span>
           </div>
   </div>

然后最后在提交表单时，我正在检查是否选中了所有复选框

if (this.basicCheckboxes.every(val => val === true)) {
                console.log('All check box selected');
            }

获取表单提交时所有 p-checkbox 的状态 (Angular PrimeNG)

Get status of all p-checkbox on form submit (Angular PrimeNG)

typescript

primeng

angular