显示跨字段自定义验证错误消息



在我的响应式表单中,我为3个输入字段构建了一个自定义验证。验证的主要功能是当3个输入字段中的1/2有值时返回一个错误(我希望当用户在1个字段中输入值时,所有3个字段都必需)。

这是验证器:

public addressValidator(control: AbstractControl): { [key: string]: boolean } | null {
const zip= control.get('zip');
const houseNumber= control.get('houseNumber');
const street= control.get('street');
if ((zip?.value !== "" || houseNumber?.value !== "" || street?.value !== "") &&
(zip?.value === "" || houseNumber?.value === "" || street?.value === "")) {
console.log("form not valid");
return { 'invalid': true };
}   return null;
}

ngOnInit:

ngOnInit(): void {
this.contactForm = this.fb.group(
{
addition: "",
residence: ["", [
Validators.required
]],
phone: "",
mobile: "",
address: this.fb.group({
street: ['', [
]],
houseNumber: ['', [
]],
zip: ['', [
]],
}, { validator: this.adresValidator } )
});

:

<ng-container formGroupName="address">
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>Street</mat-label>
<input matInput formControlName="street">
<mat-error *ngIf="street.errors?.invalid">Field is mandatory</mat-error>
</mat-form-field>
</div>

我正在使用Angular Material来显示一个错误消息,但即使我的控制台。日志告诉我验证已应用,我似乎无法在模板中显示消息。我已经尝试了HTML示例中的代码以及其他一些行,但它们要么被弃用,要么不起作用。

我的问题是,我如何在模板中显示错误?(注意:address是一个嵌套的formGroup)

验证器被添加到this.contactForm本身。因此,错误将在contactForm组。

<mat-error *ngIf="contactForm.errors?.invalid">Field is mandatory</mat-error>

相关内容

最新更新