自定义验证器帮助Angular 14

Question

我一直无法真正理解如何在我的反应式表单中实现自定义验证器

我有15个字段，其中3个字段属于自定义验证器"；tcpPorts"udpPorts"；，以及"；icmp"；这是一个复选框。我想要实现的逻辑是，这三个字段中至少有一个字段具有可以提交的值。表单中的其他字段至少需要一个。

如何为此构建正确的验证器？

组件。我的表单

newFWXForm = this.fb.group(
{
sspSelect: ["", Validators.required],
requester: [this.loggedInUser],
requesterContactInfo: [this.loggedInUserEmail],
fwxDescription: ["", Validators.required],
durationTypeSelect: ["Permanent", Validators.required],
durationDate: [""],
infraSelect: [""],
sourceIPs: ["", Validators.required],
DestAnyCheck: [false],
SrcAnyCheck: [false],
icmp: [false, atleastOneValidator()],
destinationIPs: ["", Validators.required],
tcpPorts: ["", atleastOneValidator()],
udpPorts: ["", atleastOneValidator()],
addDirectory: new FormControl(false),
},
{ Validators: [] }

)；

这里还有一个自定义的Validator函数，我在里面尝试了很多不同的逻辑，如果有帮助和知识，我将不胜感激！

export function atleastOneValidator(): ValidatorFn {
return (control: AbstractControl): ValidationErrors | null => {};
}

提前谢谢！

Answer 1

您可以为FormGroup创建一个Validator，用于检查3个子FormControls的值。

可能是这样的。

export function atleastOneValidator(controlsNames: string[]): ValidatorFn {
return (group: AbstractControl): ValidationErrors | null => {
// Here include your validation logic of the controls. Im just checking for one truthy.
const isValid = controlsNames.some(
(fieldName) => group.get(fieldName)?.value
);
return isValid ? null : { atleastOneValidator: true };
};

}

然后通过传递一个要检查的控件名称数组将其添加到FormGroup验证器中。

newFWXForm = this.fb.group(
{
... //your controls 
},
{ 
validators: [atleastOneValidator(['icmp', 'tcpPorts', 'udpPorts'])]
}
)

干杯