自定义验证器更新帮助Angular 14

Question

我的表单和自定义验证器就在这里，我认为逻辑应该可以工作。我有15个字段，其中3个字段是自定义验证器引用的('cmp'，'cpPorts'，'dpPorts'(。除了其他必填字段外，我还需要填写这三个字段中的至少一个才能提交。

这是我组件中的代码.ts

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],
destinationIPs: ["", Validators.required],
tcpPorts: [],
udpPorts: [],
addDirectory: new FormControl(false),
},
{
Validators: this.atleastOnePortValue("icmp", "tcpPorts", "udpPorts"),
}
);
private atleastOnePortValue( controlNameA: string,controlNameB: string,controlNameC: string): ValidatorFn {
return (control: AbstractControl): ValidationErrors | null => {
const formGroup = control as FormGroup;
const valueOfControlA = formGroup.get(controlNameA)?.value;
const valueOfControlB = formGroup.get(controlNameB)?.value;
const valueOfControlC = formGroup.get(controlNameC)?.value;
if (
valueOfControlA === false &&
valueOfControlB === null &&
valueOfControlC === null
) {
return { atLeastOne: true};
} else {
return null;
}
};
}

有什么关于为什么这仍然不起作用的知识或帮助吗？非常感谢您！

Answer 1

注意：这是一个展示如何使验证器在"一个控制"；，不是整个形式的

这就像这个SO，但随着另一个领域的扩展

export function conditionalValidator(field: string[]): ValidatorFn {
return (formControl) => {
if (!formControl.parent) {
return null;
}
const otherControls = field.map((x) => formControl.parent.get(x));
if (otherControls.filter((x) => x).length == field.length) {
const error =
formControl.value || otherControls.find((x) => x.value)
? null
: { error: 'this field or ' + field + ' is required' };
const controlCheck = error
? otherControls.filter((x) => x.valid)
: otherControls.filter((x) => x.invalid);
if (controlCheck.length) {
setTimeout(() => {
controlCheck.forEach((x) =>
x.updateValueAndValidity({ emitEvent: false })
);
});
}
return error;
}
};
}

您有，例如

form = new FormGroup({
control1: new FormControl(
null,
conditionalValidator(['control2', 'control3'])
),
control2: new FormControl(
null,
conditionalValidator(['control1', 'control3'])
),
control3: new FormControl(
null,
conditionalValidator(['control1', 'control2'])
),
});

查看堆叠式

Answer 2

简单问题：-(

用于通过Formbuilder将验证器添加到表单的参数被命名为"；验证器"；取而代之的是"；验证器"；。

newFWXForm = this.fb.group(
{
...
},
{
validators: this.atleastOnePortValue("icmp", "tcpPorts", "udpPorts"),
}
);

代码的其余部分看起来不错，但您也应该检查空字符串，而不是仅检查null，因为当用户清空字段时，它不会设置为null。null只是表单的初始值