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

Question

I'm using reactive angular forms and created new custom form validator but its not showing custom messages I wanted to add custom message for custom validator.

I'm trying to ignore static message I want that message to be added in that validator itself so it can show for wherever places I use that validator.

custom validator codes :

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

Artyom Amiryan · Accepted Answer · 2018-12-17 12:25:27Z

12

just change invalidFormat property's value to object with property message instead of 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"} };
    }
}

and in html if error exists display message like so

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

edited Dec 17, 2018 at 12:25

answered Dec 17, 2018 at 12:16

Artyom Amiryan

2,9961 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mohit Bumb Over a year ago

thanks and yes I tried it but just want to make sure that it is recommended way or not

Artyom Amiryan Over a year ago

yeah I think this is the best way, I couldn't found better way then this so far, also we are using it in all our projects and it works perfect

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related