Form Validation Angular 4

So, I was attempting to use the following example: https://github.com/agiratech/angular4-reactive-form-exercise2/

However, when I implement it, and submit my form, no errors show anywhere on the screen. Below you will find all associated code that I can think of that relates. I'm looking for how to get the errors to show on the screen. I'm fairly new to Angular 4, so any help would be appreciated.

pages.module.ts

import ...
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import ...

import { RegisterComponent } from './register/register.component';
import ...
import { ErrorsComponent } from '../errors.component';

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild(PagesRoutes),
        FormsModule,
        ReactiveFormsModule
    ],
    declarations: [
        LoginComponent,
        RegisterComponent,
        LockComponent,
        ErrorsComponent
    ]
})

export class PagesModule {}

register.component.ts

import ...
import {FormGroup, FormBuilder, Validators, FormControl, NgForm} from '@angular/forms';
import ...
import { CustomValidators } from "../../validators/custom-validator.directive";

declare var $:any;

@Component({
    moduleId:module.id,
    selector: 'register-cmp',
    templateUrl: './register.component.html'
})

export class RegisterComponent implements OnInit{
    registerForm: FormGroup;
    test : Date = new Date();
    loading = false;
    error = '';

    constructor(
        private form: FormBuilder,
        private router: Router,
        private authenticationService: AuthenticationService)
    {
        this.registerForm = new FormGroup ({
            'username':new FormControl('', Validators.required),
            'email': new FormControl('', [Validators.required, CustomValidators.validEmail]),
            'first_name': new FormControl('', Validators.required),
            'last_name': new FormControl('', Validators.required),
            'password': new FormControl('', Validators.required),
            'confirmPassword': new FormControl('', Validators.required)
        });
    }


    checkFullPageBackgroundImage(){
        var $page = $('.full-page');
        var image_src = $page.data('image');

        if(image_src !== undefined){
            var image_container = '<div class="full-page-background" style="background-image: url(' + image_src + ') "/>'
            $page.append(image_container);
        }
    };

    ngOnInit() {


        this.checkFullPageBackgroundImage();

        setTimeout(function(){
            // after 1000 ms we add the class animated to the login/register card
            $('.card').removeClass('card-hidden');
        }, 700)
    }

    register(registerForm: NgForm) {
        console.log(this.registerForm.value);
    }


}

register.component.html

<form [formGroup]="registerForm" (ngSubmit)="register(registerForm)">
        <div class="card card-plain">
        <div class="content">
         <div class="form-group">
              <input type="text" placeholder="Your First Name" class="form-control" formControlName="first_name">
              <errors [control]="registerForm.controls.first_name"></errors>
         </div>
         <div class="form-group">
              <input type="text" placeholder="Your Last Name" class="form-control" formControlName="last_name">
              <errors [control]="registerForm.controls.last_name"></errors>
         </div>
         <div class="form-group">
              <input type="text" placeholder="Username" class="form-control" formControlName="username">
              <errors [control]="registerForm.controls.username"></errors>
         </div>
         <div class="form-group">
              <input type="email" placeholder="Enter email" class="form-control" formControlName="email">
              <errors [control]="registerForm.controls.email"></errors>
         </div>

         <div class="form-group">
             <input type="password" placeholder="Password" class="form-control" formControlName="password">
             <errors [control]="registerForm.controls.password"></errors>
         </div>
         <div class="form-group">
             <input type="password" placeholder="Password Confirmation" class="form-control" formControlName="confirmPassword">
             <errors [control]="registerForm.controls.confirmPassword"></errors>
         </div>
             </div>
             <div class="footer text-center">
                 <button [disabled]="loading" type="submit" class="btn btn-fill btn-neutral btn-wd">Create Account</button>
                <i *ngIf="loading" class="fa fa-spinner fa-spin fa-fw"></i>
             </div>
             <errors [control]="registerForm"></errors>
         </div>
    </form>

errors.component.ts

import { Component, Input } from '@angular/core';
import { AbstractControlDirective, AbstractControl } from '@angular/forms';

@Component({
  selector: 'errors',
  template: `
    <ul *ngIf="showErrors()">
      <li class="help-box text-warning" *ngFor="let error of errors()">{{error}}</li>
    </ul>
  `,
})
export class ErrorsComponent {

  private static readonly errorMessages = {
    'required': () => 'This field is required',
    'minlength': (params) => 'The min number of characters is ' + params.requiredLength,
    'maxlength': (params) => 'The max allowed number of characters is ' + params.requiredLength,
    'pattern': (params) => 'The required pattern is: ' + params.requiredPattern,
    'age': (params) => params.message,
    'validEmail': (params) => params.message
  };

  @Input()
  private control: AbstractControlDirective | AbstractControl;

  showErrors(): boolean {
    return this.control &&
      this.control.errors &&
      (this.control.dirty || this.control.touched);
  }

  errors(): string[] {
    return Object.keys(this.control.errors)
      .map(field => this.getMessage(field, this.control.errors[field]));
  }

  private getMessage(type: string, params: any) {
    return ErrorsComponent.errorMessages[type](params);
  }

}