Angular语言 - FormGroup内部的FormGroup上的条件自定义验证器

Question

我有一个表单，需要检查一组复选框中的一个是否被选中，如果一个下拉菜单有一个特定的值。我有一个对复选框起作用的验证器，但我只需要它来检查下拉框是否是一个特定的值。下面是表单和验证代码。我试过像这样的验证器绑定。requirecheckboxesvalidator .bind(this)，但它似乎忽略了验证器

readonly closeFormGroup: FormGroup;

constructor(
formBuilder: FormBuilder,
) {
this.closeFormGroup = formBuilder.group({
notes: [null],
reason: [1, Validators.required],
checkBoxGroup: new FormGroup({
checkBox1: new FormControl(false),
checkBox2: new FormControl(false),
checkBox3: new FormControl(false),
checkBox4: new FormControl(false),
checkBox5: new FormControl(false),
} ,this.requireCheckboxesValidator())
});
}
public requireCheckboxesValidator(): ValidatorFn {
return function validate(formGroup: FormGroup) {
let checked = 0;
console.log(formGroup);
Object.keys(formGroup.controls).forEach(key => {
const control = formGroup.controls[key];
if (control.value === true) {
checked++;
}
});
if (checked < 1) {
return {
requireCheckboxesToBeChecked: true,
};
}
return null;
};
}

Answer 1

我可以建议一个不同的方法。
您可以订阅下拉字段的valueChanges，然后如果所选择的特定值是您所期望的，您可以使用addValidator向复选框表单控件添加特定的验证器。
我也喜欢你添加自定义验证器的想法(绝对是更好的方法)，它实际上也应该以这种方式工作。从我的理解，你试图添加验证器复选框只有当下拉框有一个特定的值?在这种情况下，您需要将逻辑更改为如下内容:

Object.keys(formGroup.controls).forEach(key => {
const control = formGroup.controls[key];
if (control.value === true) {
checked++;
}
let dropdownValue = undefined;
if (key === 'dropdownFormControlKey') {
dropdownValue = control.value;
}
});
if (checked < 1) { // --- Add check to also see if the dropdown's value is what you expect and only then return the error
return {
requireCheckboxesToBeChecked: true,
};
}
return null;
};

• 另外，我建议不要在您的组件中定义验证器函数，而是按照本文查看正确的方法—https://angular.io/guide/form-validation