title: Angular 6: TypeError: Cannot read property 'invalid' of undefined?
body: <p>I am coding the frontend of my application, but I have encountered a problem in my Angular 6 registration code. I have apparently made a TypeError, but I do not see why it would be undefined.</p>
  
  <p>Here is my registration.component.ts.</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
  import { NgModule } from '@angular/core';
  import {RouterModule} from '@angular/router';
  import {Routes} from '@angular/router';
  import {
    MatToolbarModule, MatButtonModule, MatInputModule, MatIconModule, MatSelectModule, MatTableModule, MatGridListModule,
    MatCardModule, MatMenuModule, MatFormFieldModule, MatOptionModule, MatRadioModule
  } from '@angular/material';
  import {HttpClientModule } from '@angular/common/http';
  import {FormBuilder, FormControl, FormsModule} from '@angular/forms';
  import {FormGroup} from '@angular/forms';
  import {Validators} from '@angular/forms';
  import {ReactiveFormsModule} from '@angular/forms';
  import { LayoutModule } from '@angular/cdk/layout';
  import 'hammerjs';
  
  
  @Component({
    selector: 'app-register',
    templateUrl: './register.component.html',
    styleUrls: ['./register.component.css']
  })
  export class RegisterComponent implements OnInit {
    registerForm: FormGroup;
    loading = false;
    submitted = false;
    hide = true;
    public lastNameC: FormControl;
    public firstNameC: FormControl;
    public emailC:  FormControl;
    public passwordC: FormControl;
    handleSubmit() {
      console.log(this.registerForm.value);
      alert('You registered!');
    }
  
    trueOrFalse() {
      return this.registerForm.valid;
    }
  
    passwordError() {
      return this.passwordC.hasError('minlength') ? 'Your password is too short.' :
        this.passwordC.hasError('pattern') ? 'Your password must have one uppercase letter, one lowercase letter, one number and one non alphanumeric character.' :
          ' ';
    }
  
    lastNameError() {
      if (this.lastNameC.hasError('required')) {
        return 'Last name is required.';
      }
    }
  
    emailError() {
      return this.emailC.hasError('required') ? 'You must enter a value.' :
        this.emailC.hasError('email') ? 'Not a valid email. Please read the field again.' :
          ' ';
    }
  
    firstNameError() {
    if (this.firstNameC.hasError('required')) {
      return 'Enter your first name.';
    }
  
  
  
    }
  
  
  
    constructor() {
  
    }
  
    ngOnInit() {
      this.registerForm = new FormGroup({
        emailC: new FormControl('', [Validators.required, Validators.email]),
        firstNameC : new FormControl('', [Validators.required]),
        lastNameC: new FormControl('', [Validators.required]),
        passwordC : new FormControl('', [Validators.required, Validators.minLength(8), Validators.pattern('^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[$@$!%*?&amp;])[A-Za-z\\d$@$!%*?&amp;]{8,}')]),
      });
  
  
    }
  
  
  }
  </code></pre>
  
  <hr>
  
  <pre><code>&lt;form class="example-form" [formGroup]="registerForm" (ngSubmit)="handleSubmit()"&gt;
    &lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"&gt;
    &lt;mat-form-field class="example-full-width"&gt;
    &lt;input matInput placeholder="First Name"  formControlName="firstNameC"&gt;
      &lt;mat-error *ngIf="firstNameC.invalid"&gt;{{firstNameError()}}&lt;/mat-error&gt;
   &lt;/mat-form-field&gt;
    &lt;mat-form-field class="example-full-width"&gt;
      &lt;input matInput placeholder="Last Name" formControlName="lastNameC"&gt;
      &lt;mat-error *ngIf="lastNameC.invalid"&gt; {{lastNameError()}} &lt;/mat-error&gt;
    &lt;/mat-form-field&gt;
    &lt;mat-form-field class="example-full-width"&gt;
      &lt;input  matInput placeholder="email" formControlName="emailC"&gt;
      &lt;mat-error *ngIf="emailC.invalid"&gt;{{emailError()}}&lt;/mat-error&gt;
    &lt;/mat-form-field&gt;
    &lt;mat-form-field&gt;
      &lt;input matInput placeholder="password" formControlName="passwordC"&gt;
      &lt;mat-error *ngIf="passwordC.invalid"&gt;{{passwordError()}}&lt;/mat-error&gt;
    &lt;/mat-form-field&gt;
  
    &lt;button mat-raised-button color="accent"&gt; Register &lt;/button&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>My registration form's html. The error is occuring on Line 4, but for my formControlName I have referenced the appropriate control.</p>
  
  <pre><code>The error aforementioned..
  RegisterComponent.html:4 ERROR TypeError: Cannot read property 'invalid' of undefined
      at Object.eval [as updateDirectives] (RegisterComponent.html:5)
      at Object.debugUpdateDirectives [as updateDirectives] (core.js:11062)
      at checkAndUpdateView (core.js:10459)
      at callViewAction (core.js:10700)
      at execComponentViewsAction (core.js:10642)
      at checkAndUpdateView (core.js:10465)
      at callViewAction (core.js:10700)
      at execEmbeddedViewsAction (core.js:10663)
      at checkAndUpdateView (core.js:10460)
      at callViewAction (core.js:10700)
  </code></pre>
  
  <p>Here's my <a href="https://stackblitz.com/edit/ang-code-so?file=src/app/register/register.component.html" rel="noreferrer">StackBlitz example throwing the error.</a></p>