角形式自定义的验证信息导致错误

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