使用验证程序禁用表单组

Question

我的checkboxForm上有formArray复选框，如果没有checked复选框，我需要禁用按钮提交，我在checkboxForm上实现了自定义验证器，这就是我尝试过的;

Ts文件

get formReceivedSummons() {
return this.checkboxForm.get('receivedSummons') as FormArray;
}
ngOnInit() {
this.checkboxForm = this.formBuilder.group({
receivedSummons: this.formBuilder.array([])
});
this.getReceivedSummons();
}
getReceivedSummons() {
this.receivedSummonsSubscription = this.inquiryStore.summons$
.subscribe(receivedSummons => {
this.receivedSummons = receivedSummons;
});
}
addCheckboxes() {
this.formReceivedSummons.setValue([]);
this.formReceivedSummons.setValidators([minSelectedCheckboxes(1)]);
this.receivedSummons.data.items.map(x => {
this.formReceivedSummons.push(
this.formBuilder.group({
itemNo: [x.itemNo],
isChecked: false,
}));
});
}

function minSelectedCheckboxes(min = 1) {
const validator: ValidatorFn = (formArray: FormArray) => {
const totalSelected = formArray.controls
.map(control => control.value)
.reduce((prev, next) => (next ? prev + next : prev), 0);
return totalSelected >= min ? null : { required: true };
};
return validator;
}

我在formArray放置了验证器，这是this.formReceivedSummons.setValidators([minSelectedCheckboxes(1)]);

这是我在html 文件中实现的

<form [formGroup]="checkboxForm" (ngSubmit)="submitSelectedCheckbox()">
<ng-container formArrayName="receivedSummons" *ngFor="let summon of formReceivedSummons.controls; let i = index">
<ng-container [formGroupName]="i">
<input type="checkbox" formControlName="isChecked"> {{summon.value.itemNo}}
</ng-container>
</ng-container>
<button [disabled]="!checkboxForm .valid">submit</button>
</form>

我的复选框表单按钮已被禁用，但是如果我选中了一个checkbox它应该启用，但它没有。我不确定如何解决问题，可以使用一些指南和指导来解决这个问题。

更新

根据我在谷歌和 所以，这是我能得到的接近，

addCheckboxes() {
this.formReceivedSummons.setValue([]);
this.receivedSummons.data.items.map(item => {
this.formReceivedSummons.push(
this.formBuilder.group({
itemNo: [x.itemNo]
isChecked: [false, Validators.requiredTrue],
}));
});
}

通过使用Validators.requiredTrue，它需要选中两个复选框，然后它将启用该按钮，但我的要求我至少需要一个复选框才能选中，而不是启用按钮提交表单

Answer 1

在构造函数中初始化表单时，首先将验证器添加到表单数组中。然后在收到数据后调用addCheckboxes方法。

form: FormGroup;
receivedSummons = [];
constructor(private formBuilder: FormBuilder) {
this.checkboxForm = this.formBuilder.group({
receivedSummons: new FormArray([], minSelectedCheckboxes(1))
});
of(this.someMethodWhichReturnReceivedSummons()).subscribe(receivedSummons => {
this.receivedSummons = receivedSummons;
this.addCheckboxes();
});
}

在添加复选框中

private addCheckboxes() {
this.receivedSummons.map((o, i) => {
const control = new FormControl(i === 0); // if first item set to true, else false
(this.form.controls.receivedSummons as FormArray).push(control);
});
}

Answer 2

做这样的事情：

导出一个函数。像这样：

export function customValdiator(form: FormGroup) {
const formValue = form.value;
// with the formValue apply your own validation logic .
if (/* HAVE ERROR */) {
return { checkboxesRequired: true };
} else {
return null;
}
}

构建表单：

this.checkboxForm = this.formBuilder.group({
receivedSummons: this.formBuilder.array([])
},  { validator: customValdiator });

并从添加复选框方法中删除添加验证器。

当您更改表单上的任何数据时，无论您是否向 FormArray 添加或删除行都无关紧要receivedSummonsAngular 将执行customValdiator函数并将表单作为参数传递，并且您可以访问当前收到的有效召唤值，该值被选中。