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

角度形式自定义验证程序消息导致错误

1 个答案: