获取表单提交时所有p复选框的状态(Angular PrimeNG)

Question

我的表单中每个字段旁边都有多个复选框，复选框数据不会保存。在提交表单之前，我必须弄清楚所有复选框都已选中。如果选中所有复选框，我将得到真，否则为假。我需要以动态的方式做，因为我的形式中有大量的领域。给定我的 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

我不完全了解您的用例以及解决方案需要的"动态"程度，但是由于您已经在使用formBuilder，因此您可以在表单中添加一个名为"复选框"的新formGroup，其中包含每个复选框的值(默认值为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"来生成发送到后端的数据，那么您可以为复选框创建第二个表单，也可以将formGroup一分为二。

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;
}
}

网页部分：

<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');
}