如何显示角度验证器的错误

Question

我有一个Form。我想检查formControlName web是否是isValidHttpUrl。

我已经实现了一个名为web.Validator.ts 的自定义验证器

如果web窗体ControlName无效，如何在输入web上打印消息？

company.component.ts文件的一部分

initForm() {
if(!this.empresaForm) {
this.empresaForm = new FormGroup({
email: new FormControl(''),
name: new FormControl(''),
phone: new FormControl(''),
web: new FormControl('',[new WebValidator().validate])
})  
}
else {
this.editMode = true;
}
}

company.component.html文件的一部分

<mat-form-field appearance="fill">
<mat-label>Web</mat-label>
<input formControlName="web" matInput placeholder="Pàgina web establiment" >
</mat-form-field>

验证器类别：

import {  AbstractControl, ValidationErrors, Validator} from '@angular/forms';
export class WebValidator implements Validator {
constructor() {
}
validate(control: AbstractControl): ValidationErrors | null {
if(!control || !control.parent) return null;
console.log(control.parent.get('web').value);
if (isValidHttpUrl(control.parent.get("web").value)) {
return null;
}
else return {
'webNoOk': true
};
}
}
function isValidHttpUrl(string) {
let url;

try {
url = new URL(string);
} catch (_) {
return false;  
}

return url.protocol === "http:" || url.protocol === "https:";
}

Answer 1

这将显示在输入字段下方。

<mat-form-field appearance="fill">
<mat-label>Web</mat-label>
<input formControlName="web" matInput placeholder="Pàgina web establiment" >
<mat-error *ngIf="empresaForm.get('web').errors?.webNoOk">Not valid url</mat-error>
</mat-form-field>