forme angulaire messages validateur personnalisé provoquant erreur

Question

J'ai un validateur personnalisé pour des listes noires des mots de contrôleurs de forme:

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

Tout fonctionne très bien! Mais lorsque je tente de faire un message de validation je reçois: ERROR TypeError: Cannot read property 'validateBlacklist' of null sur chaque touche à moins que c'est un mot dans mon tableau liste noire ...

De ceci:

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

Qu'est-ce que je fais mal ?!

Answer 1

Une erreur est survenue en raison de la condition ngIf.

objet errors n'a pas validateBlacklist objet au moment de l'enregistrement et sa valeur actuelle est nulle. Essayez d'abord console.log(this.commentForm.controls['newComment'].errors).

Il devrait ressembler à ceci:

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