title: Angular 4 *ngIf not showing error message for custom validation
body: <p>I'm trying to test custom validations in Angular 4 and am using the 'appForbiddenName' validation provided by angular <a href="https://stackblitz.com/angular/moovprgmmrab?file=src%2Fapp%2Fshared%2Fforbidden-name.directive.ts" rel="noreferrer">here</a>. </p>
  
  <p>Here is my code set up: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='col-xs-12 col-sm-5'&gt;
    &lt;div class="form-group"&gt;
        &lt;label class="control-label" for="firstName"&gt;First Name&lt;/label&gt;
        &lt;input class="form-control input-md" 
                #firstName="ngModel" 
                required name="firstName" 
                minlength="4" appForbiddenName="bob" 
                type="text" 
                placeholder="First Name"
                [(ngModel)]="personal.firstName"&gt;
        &lt;div style="font-size: 12px; color: red;" 
              *ngIf="firstName.invalid &amp;&amp; (firstName.dirty || firstName.touched)"[hidden]="firstName.valid"&gt;
          &lt;div *ngIf="firstName.errors.required"&gt;*Required&lt;/div&gt;
          &lt;div *ngIf="firstName.errors.minlength"&gt;Min length is 4&lt;/div&gt;
          &lt;div *ngIf="firstName.errors.appForbiddenName"&gt;Name cannot be bob&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In the app.module.ts, I've imported the ForbiddenValidatorDirective from the shared folder I've created (it's underneath /* Shared Service */) : </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  
  /* App Root */
  import { AppComponent } from './app.component';
  import { NavbarComponent } from './navbar/navbar.component';
  
  /* Feature Components */
  import { PersonalComponent } from './personal/personal.component';
  import { IncomeComponent } from './income/income.component';
  import { BankComponent } from './bank/bank.component';
  import { AddressComponent } from './address/address.component';
  import { ResultComponent } from './result/result.component';
  
  /* Routing Module */
  import { AppRoutingModule } from './app-routing.module';
  
  /* Shared Service */
  import { FormDataService } from './data/formData.service';
  import { WorkflowService } from './workflow/workflow.service';
  import { ForbiddenValidatorDirective } from './shared/custom-validations.directive';
  
  /* Animation Modules */
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  
  @NgModule({
    imports: [BrowserModule,
      FormsModule,
      AppRoutingModule,
      BrowserAnimationsModule,
      ReactiveFormsModule
    ],
    providers: [
      { provide: FormDataService, useClass: FormDataService },
      { provide: WorkflowService, useClass: WorkflowService }
    ],
    declarations: [
      AppComponent, NavbarComponent, PersonalComponent, IncomeComponent, 
      BankComponent, AddressComponent, ResultComponent, ForbiddenValidatorDirective
      ],
    bootstrap: [AppComponent]
  })
  
  export class AppModule { }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm following the <a href="https://stackblitz.com/angular/moovprgmmrab?file=src%2Fapp%2Ftemplate%2Fhero-form-template.component.html" rel="noreferrer">live example</a> from <a href="https://angular.io/guide/form-validation" rel="noreferrer">angular.io's</a> documentation and if I type the forbidden name "bob" in the input field, it's coming up as an error but the error message won't display. </p>
  
  <p><a href="https://i.stack.imgur.com/ZBL58.png" rel="noreferrer">screenshot</a></p>
  
  <p>Other error messages, such as 'required' or 'min length is 4' are showing but not the error message for forbidden name. The input field is being highlighted red like I've styled to show it's an invalid input, but no error message for the custom validator appForbiddenName (or any other custom validation I've added).</p>
  
  <p>I'm new to both Angular and Typescript, so excuse the potentially amateurish question. Someone please help, it seems trivial but I'm not sure everything Angular's doing.</p>
  
  <p>Also, to build this angular app, I followed the tutorial <a href="https://www.cc28tech.com/angular-multi-step-wizard-part-1/" rel="noreferrer">here</a>.</p>