角形式自定義的驗證信息導致錯誤

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