Пользовательские сообщения валидатора угловой формы, вызывающие ошибку

Question

У меня есть собственный валидатор для внесения в черный список слов из контроллеров форм:

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

Все отлично работает! Но когда я пытаюсь сделать сообщение проверки, я получаю:ERROR TypeError: Cannot read property 'validateBlacklist' of null на каждый ключ вверх, если это не слово в моем массиве черного списка...

Из этого:

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

Что я делаю неправильно?!

Answer 1

Произошла ошибка из-за состояния ngIf.

объект errors не имеет validateBlacklist объект на момент проверки и его текущее значение равно нулю. Пытаться console.log(this.commentForm.controls['newComment'].errors) первый.

Так должно выглядеть так:

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()"