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

【问题标题】：How to show the error from angular validator?如何显示角度验证器的错误？
【发布时间】：2021-02-23 12:32:45
【问题描述】：

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

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

如果 web formControlName 无效，我如何在输入 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:";
  }

【问题讨论】：

标签： javascript html angular validation input

【解决方案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>

【讨论】：