Форма угловой реактивной реакции не показывает встроенное сообщение об ошибке валидатора

Я работал с валидацией угловой реактивной формы, и я получил неожиданную проблему. Я создал встроенный валидатор для отфильтровывания ограниченных слов из текстура. Кодекс должен был определить ограниченные слова, и если они появляются в Textarea, оно помечает текстуарию как недействительным и отображать сообщение об ошибке в Textarea, т. Е. «Ограниченные слова, найденные: foo, bar» Textarea имеет другие проверки, такие как требуется и maxlength (400) , которые работают нормально и отображать сообщения об ошибках. Проблема, возникающая только с пользовательским валидатором. Хотя Textarea правильно идентифицирует ограниченные слова и помечает поле недействительным, сообщение об ошибке не отображается. В чем может быть проблема? У меня нет ошибок из NPM или консоли.

Вот мой класс компонента: Create-Session.comPonent.ts

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { ISession, restrictedWords } from '../shared/index';

@Component({
    templateUrl: 'create-session.component.html',
    styles: [`
      em { float: right; color: #E05C65; padding-left: 10px; }
      .error input, .error select, .error textarea { background-color: #E3C3C5; }
      .error ::-webkit-input-placeholder { color: #999; }
      .error ::-moz-placeholder { color: #999; }
      .error :ms-input-placeholder { color: #999; }
    `]
})

export class CreateSessionComponent implements OnInit {
    newSessionForm:FormGroup
    name:FormControl
    presenter:FormControl
    duration:FormControl
    level:FormControl
    abstract:FormControl

    constructor() {}

    ngOnInit() {
        this.name = new FormControl('', Validators.required)
        this.presenter = new FormControl('', Validators.required)
        this.duration = new FormControl('', Validators.required)
        this.level = new FormControl('', Validators.required)
        this.abstract = new FormControl('', [Validators.required, Validators.maxLength(400), restrictedWords(['foo', 'bar'])])

        this.newSessionForm = new FormGroup({
            name: this.name,
            presenter: this.presenter,
            duration: this.duration,
            level: this.level,
            abstract: this.abstract
        })
    }

    saveSession(formValues) {
        let session:ISession = {
            id: undefined,
            name: formValues.name,
            duration: +formValues.duration,
            level: formValues.level,
            presenter: formValues.presenter,
            abstract: formValues.abstract,
            voters: []
        }

        console.log(session)
    }
}

Вот мой компонент HTML: Create-Session.comPonent.html

<div class="col-md-12">
  <h3>Create Session</h3>
</div>
<div class="col-md-6">
  <form [formGroup]="newSessionForm" (ngSubmit)="saveSession(newSessionForm.value)" autocomplete="off">
    <div class="form-group" [ngClass]="{ 'error': name.invalid && name.dirty}" >
      <label for="sessionName">Session Name:</label>
      <em *ngIf="name.invalid && name.dirty">Required</em>
      <input formControlName="name" id="sessionName" type="text" class="form-control" placeholder="session name..." />
    </div>
    <div class="form-group" [ngClass]="{ 'error': presenter.invalid && presenter.dirty}" >
      <label for="eventDate">Presenter:</label>
      <em *ngIf="presenter.invalid && presenter.dirty">Required</em>      
      <input formControlName="presenter" id="presenter" type="text" class="form-control" placeholder="presenter..." />
    </div>
    <div class="form-group" [ngClass]="{ 'error': duration.invalid && duration.dirty}" >
      <label for="duration">Duration:</label>
      <em *ngIf="duration.invalid && duration.dirty">Required</em>      
      <select formControlName="duration" class="form-control">
        <option value="">select duration...</option>
        <option value="1">Half Hour</option>
        <option value="2">1 Hour</option>
        <option value="3">Half Day</option>
        <option value="4">Full Day</option>
      </select>
    </div>
    <div class="form-group" [ngClass]="{ 'error': level.invalid && level.dirty}" >
      <label for="level">Level:</label>
      <em *ngIf="level.invalid && level.dirty">Required</em>      
      <select formControlName="level" class="form-control">
        <option value="">select level...</option>
        <option value="Beginner">Beginner</option>
        <option value="Intermediate">Intermediate</option>
        <option value="Advanced">Advanced</option>
      </select>
    </div>
    <div class="form-group" [ngClass]="{ 'error': abstract.invalid && abstract.dirty}" >
      <label for="abstract">Abstract:</label>
      <em *ngIf="abstract.invalid && abstract.dirty && abstract?.errors.required">Required</em> 
      <em *ngIf="name.invalid && name.dirty && abstract?.errors.maxlength">Cannot exceed 400 characters</em>     
      <em *ngIf="name.invalid && name.dirty && abstract?.errors.restrictedWords">
        Restricted words found: {{abstract.errors.restrictedWords}}
      </em>
      <textarea formControlName="abstract"  id="abstract" rows=3 class="form-control" placeholder="abstract..."></textarea>
    </div>
    <button type="submit" class="btn btn-primary" [disabled]="newSessionForm.invalid">Save</button>
    <button type="button" class="btn btn-default">Cancel</button>
  </form>
</div>

Вот мой пользовательский валидатор: RESTRICED-WORDS.Validator.ts

import { FormControl } from '@angular/forms';

export function restrictedWords(words) {
    return (control: FormControl): {[key: string]: any} => {
        if(!words) return null

        var invalidWords = words
            .map(w => control.value.includes(w) ? w : null) 
                .filter(w => w != null)

        return invalidWords && invalidWords.length > 0 
        ? {'restrictedWords' : invalidWords.join(', ')} 
        : null
    }
}

Вот github repo если это поможет: https://github.com/ashraflobo / Угловое демонстрация