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

Question

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

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

自定义验证器代码：

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>

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

How to Add Custom Validation Error Message for Custom Validator in Angular

javascript

angular

typescript

angular-reactive-forms

angular-validation