如何在 Angular 中为自定义验证器添加自定义验证错误消息

Question

我正在使用反应式角度表单并创建了新的自定义表单验证器，但它没有显示自定义消息我想为自定义验证器添加自定义消息。

我试图忽略静态消息我希望将该消息添加到该验证器本身中，以便它可以在我使用该验证器的任何地方显示。

自定义验证器代码：

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: true };
    }
}

Answer 1

只需将invalidFormat属性的值更改为带有属性消息的对象，而不是true

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>