Angular 角度自定义验证程序消息

我有一个自定义验证器，用于验证数据库中是否存在序列号。 我想在找不到序列号但无法执行时，在表单字段中显示一条特定的错误消息。我尝试了不同的方法，但效果不好。 当我尝试在模板中插入此代码时

<div *ngIf="deviceInfos.controls.serial.errors && serial != null">
              Error
            </div>

有人能帮我吗？

---

非常感谢。

看看这个。这会有帮助的

import { FormControl } from '@angular/forms';

export function validateJson(input: FormControl): object | null {
    try {
        if (input.value) {
            JSON.parse(input.value);
        }

        return null;
    } catch (error) {
        return { invalidFormat: {message: "your message here"} };
    }
}

在HTML中，如果存在错误，则显示如下消息

<div *ngIf="formControl.errors.invalidFormat && formControl.dirty">
        {{ formControl.errors.invalidFormat.message}}
</div>

{{formControl.errors.invalidFormat.message}

最后我修改了我的验证器，如下所示

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AbstractControl, AsyncValidator, FormControl } from '@angular/forms';
import { map, catchError } from 'rxjs/operators';
import { of } from 'rxjs';


@Injectable({
  providedIn: 'root',
})
export class HttpRequestValidation implements AsyncValidator {
  
  constructor(private http: HttpClient) {}

  validate = (control: AbstractControl) => {

    const { value } = control;
    console.log(value);
    
    return this.http.get<any>(`http://127.0.0.1/backend/api-vitoapp/verify-serial.php?serial=${value}`)
      .pipe(

        map(() => {
            
          return null;
        }),
        catchError((err) => {
 
          console.log(err);
          return of ({ invalidFormat: {message: 'Device not found in database'} });
        })
      );
  };


}

<div *ngIf="deviceInfos.controls.serial.hasError('invalidFormat')">
       <span class="alert">{{ deviceInfos.get('serial').errors.invalidFormat.message}}</span> 
</div>

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient}；
从'@angular/forms'导入{AbstractControl，AsyncValidator，FormControl}；
从“rxjs/operators”导入{map，catchError}；
从'rxjs'导入{of}；
@注射的({
providedIn:'根'，
})
导出类HttpRequestValidation实现AsyncValidator{
构造函数（私有http:HttpClient）{}
验证=（控件：AbstractControl）=>{
const{value}=控制；
console.log（值）；
返回this.http.get(`http://127.0.0.1/backend/api-vitoapp/verify-serial.php?serial=${value}`）
.烟斗(
地图（（）=>{
返回null；
}),
catchError（（err）=>{
控制台日志（err）；
返回（{invalidFormat:{message:'数据库中未找到设备'}}}）；
})
);
};
}

然后像这样修改了我的模板

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AbstractControl, AsyncValidator, FormControl } from '@angular/forms';
import { map, catchError } from 'rxjs/operators';
import { of } from 'rxjs';


@Injectable({
  providedIn: 'root',
})
export class HttpRequestValidation implements AsyncValidator {
  
  constructor(private http: HttpClient) {}

  validate = (control: AbstractControl) => {

    const { value } = control;
    console.log(value);
    
    return this.http.get<any>(`http://127.0.0.1/backend/api-vitoapp/verify-serial.php?serial=${value}`)
      .pipe(

        map(() => {
            
          return null;
        }),
        catchError((err) => {
 
          console.log(err);
          return of ({ invalidFormat: {message: 'Device not found in database'} });
        })
      );
  };


}

<div *ngIf="deviceInfos.controls.serial.hasError('invalidFormat')">
       <span class="alert">{{ deviceInfos.get('serial').errors.invalidFormat.message}}</span> 
</div>

{{deviceinfo.get（'serial'）.errors.invalidFormat.message}

---

我不知道这是否是最好的方式，但现在它的工作

感谢您的回应和帮助。我试着在我的validato中插入你的代码，如` return null；}），catchError（（err）=>{console.log（err）；返回（{invalidFormat:{message:'your message here'}}}；}）；`并在我的模板中插入错误消息的ngIf，如

{{serial.errors.invalidFormat.message}

，但在我的控制台中，我无法读取属性invalidFormat为null的错误。请将代码更改为：

{{serial.errors？.invalidFormat.message}

通过这种方式，它将检查空对象，在没有验证错误的情况下，您不会在控制台中看到该错误。