Angular 7，验证 FormArray 中动态创建的复选框组

Question

好的，对不起，但我就是不知道该怎么做... 这里有数百个"如何在 Angular 中验证我的表单"帖子，但没有一个完全适合我想要做的事情，我只是无法弄清楚如何让它工作。 所以我在这里问这个。 如果以前有人问过，请原谅我。

我在 Angular 7.2.2 中使用响应式形式。 我从服务器返回一个项目列表，并且我正在动态创建一个复选框数组 - 每个项目一个。 我希望用户能够选中一个或多个复选框 - 但他们必须选中至少一个复选框，否则表单应该无效，并且应该禁用提交按钮。

(仅供参考，我的表单上还有其他 FormControls(<select>或<input type="text">(，我在此示例中省略了这些控件。 这些控件不是动态创建的，因此向它们添加验证程序是微不足道的。

这是我的组件.html：

<form [formGroup]="myForm" (ngSubmit)="myFormSubmit()">
<div style="width: 100%; height: 160px; padding: 3px; overflow: auto;">
<label formArrayName="itemsToSelect" *ngFor="let item of myForm.controls.itemsToSelect.controls; let i = index" style="width: 85%; padding-left: 5px;">
<input type="checkbox" formControlName="{{i}}">
{{myListOfItems[i].item_id}}<br>
</label>
</div>
<input type="submit" [disable]="!this.myForm.valid">
</form>

这是我的组件。

myListOfItems: any = [];
myForm = new FormGroup({
itemsToSelect: new FormArray([])
});
ngOnInit() {
this.myService.getMyItems()
.subscribe( (eventData) => {
myListOfItems = eventData;
myListOfItems.forEach((o, i) => {
const control = new FormControl(false); //false so the checkbox defaults to not-selected
(this.myForm.controls.itemsToSelect as FormArray).push(control);
});
});
}
myFormSubmit() {
//Do stuff here that assumes at least one checkbox is checked.
}

所以。。。我如何获得它，当所有复选框都为空时，myForm.valid 为假，但当选中一个或多个复选框时为真？ 任何帮助将不胜感激。 谢谢。

Answer 1

您必须为整个表单创建单独的验证器。例如，您可以对复选框选择进行此类验证：

function checkboxAtLeastOneSelected(form: FormGroup) {
return Object.keys(form.controls)
.some(control => form.controls[control].value === true) ? null : { invalidCheckboxes: true };
}

之后，您必须将此验证函数放入新 FormGroup 的第二个参数中：

myForm = new FormGroup({
....
}, checkboxAtLeastOneSelected);

Answer 2

好的，没关系。 我终于想通了...

当我创建表单数组时，我需要添加一个自定义验证器函数：

myForm = new FormGroup({
itemsToSelect: new FormArray([], [myCustomValidator])
});

下面是该函数在我的 component.ts 文件中的样子：

myCustomValidator(control: FormArray) {
let returnValue = false;
for (let i=0; i<control.value.length; i++) {
if (control.value[i]) {
returnValue = true; // If any of the controls is checked, returnValue will be set to true at some point in this loop
}
}
if (!returnValue) {
return { controlStatus: {status: 'invalid'} }; // Returning an object of some sort, doesn't matter what, is how you indicate the control is not valid.
} else {
return null; // Returning null is how you indicate the control is valid.
}
}