Angular 4 *ngIf not showing error message for custom validation

Question

I'm trying to test custom validations in Angular 4 and am using the 'appForbiddenName' validation provided by angular here.

Here is my code set up:

<div class='col-xs-12 col-sm-5'>
  <div class="form-group">
      <label class="control-label" for="firstName">First Name</label>
      <input class="form-control input-md" 
              #firstName="ngModel" 
              required name="firstName" 
              minlength="4" appForbiddenName="bob" 
              type="text" 
              placeholder="First Name"
              [(ngModel)]="personal.firstName">
      <div style="font-size: 12px; color: red;" 
            *ngIf="firstName.invalid && (firstName.dirty || firstName.touched)"[hidden]="firstName.valid">
        <div *ngIf="firstName.errors.required">*Required</div>
        <div *ngIf="firstName.errors.minlength">Min length is 4</div>
        <div *ngIf="firstName.errors.appForbiddenName">Name cannot be bob</div>
      </div>
    </div>
</div>

In the app.module.ts, I've imported the ForbiddenValidatorDirective from the shared folder I've created (it's underneath /* Shared Service */) :

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

I'm following the live example from angular.io's 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.

screenshot

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).

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.

Also, to build this angular app, I followed the tutorial here.

Answer 1

Your error is in this line:

<div *ngIf="firstName.errors.appForbiddenName">Name cannot be bob</div>

It should only be firstName.errors.forbiddenName

<div *ngIf="firstName.errors.forbiddenName">Name cannot be bob</div>