Angular form custom validator messages causing error

Question

I have a custom validator for blacklisting words from form controllers:

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

const blacklist = ['poop']; 
export function Blacklist(control: AbstractControl) {

    let comment = control.value.split(' ');
    for (let i = 0, j = comment.length; i < j; i++ ) {
        if (blacklist.indexOf(comment[i]) !== -1) { // -1 = is no match in array
            return {
                validateBlacklist: {
                    blacklist: false
                }
            }
        } else {

        }
    }
    return null;
}

Everything works great! But when I try to do a validation message I get: ERROR TypeError: Cannot read property 'validateBlacklist' of null on every key up unless it's a word in my blacklist array...

From this:

<div *ngIf="commentForm.controls['newComment'].errors.validateBlacklist && commentForm.controls['newComment'].touched">Error</div>

What am I doing wrong?!

pa7ryk · Accepted Answer · 2017-08-30 08:24:26Z

1

Error occurred due to ngIf condition.

Object errors doesn't have validateBlacklist object at the time of check and it's current value is null. Try console.log(this.commentForm.controls['newComment'].errors) first.

So it should look like this:

public isErrorOccurred(): boolean {
    if(
        'validateBlacklist' in this.commentForm.controls['newComment'].errors &&
        this.commentForm.controls['newComment'].touched
    ) {
        return 'blackList' in this.commentForm.controls['newComment'].errors.validateBlacklist;
    }
}

ngIf:

*ngIf="isErrorOccurred()"

edited Aug 30, 2017 at 8:24

answered Aug 29, 2017 at 20:13

pa7ryk

5616 silver badges16 bronze badges

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

3 Comments

Ben Racicot Over a year ago

it is {minlength: {requiredLength: 2, actualLength: 1}} for each keyup then when the word matches the validator it's {validateBlacklist: {blacklist: false}}

Ben Racicot Over a year ago

That's cool but I need to know how to show an error message for that specific error on that control. For this and learning purposes.

pa7ryk Over a year ago

That's what this code do. It checks if exactly this type of error occurred and return boolean. If it exists it returns true and you can show your div. Just try to use it.

Collectives™ on Stack Overflow

Angular form custom validator messages causing error

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related