Angular 6: TypeError: Cannot read property 'invalid' of undefined?

Question

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.

Here is my registration.component.ts.

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)(?=.*[$@$!%*?&])[A-Za-z\\d$@$!%*?&]{8,}')]),
    });


  }


}

---

<form class="example-form" [formGroup]="registerForm" (ngSubmit)="handleSubmit()">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <mat-form-field class="example-full-width">
  <input matInput placeholder="First Name"  formControlName="firstNameC">
    <mat-error *ngIf="firstNameC.invalid">{{firstNameError()}}</mat-error>
 </mat-form-field>
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Last Name" formControlName="lastNameC">
    <mat-error *ngIf="lastNameC.invalid"> {{lastNameError()}} </mat-error>
  </mat-form-field>
  <mat-form-field class="example-full-width">
    <input  matInput placeholder="email" formControlName="emailC">
    <mat-error *ngIf="emailC.invalid">{{emailError()}}</mat-error>
  </mat-form-field>
  <mat-form-field>
    <input matInput placeholder="password" formControlName="passwordC">
    <mat-error *ngIf="passwordC.invalid">{{passwordError()}}</mat-error>
  </mat-form-field>

  <button mat-raised-button color="accent"> Register </button>

</form>

My registration form's html. The error is occuring on Line 4, but for my formControlName I have referenced the appropriate control.

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)

Here's my StackBlitz example throwing the error.

Answer 1

You need to use safe navigation operator as follows,

   <mat-error *ngIf="firstNameC?.invalid">{{firstNameError()}}</mat-error>

STACKBLITZ DEMO

Answer 2

<form action="#" #f="ngForm" (ngSubmit)="f.form.valid && onSubmit()">
    <div class="form-group" [class.has-error]="firstName.invalid && firstName.touched">
            <label  class="control-label">Full Name : </label>
            <input type="text" name="uname"  [(ngModel)]="uname" class="form-control" #firstName="ngModel">
            <span class="help-block" *ngIf="firstName.touched && firstName.invalid">Full Name is requried</span>
            {{firstName.touched}}
            {{firstName.invalid}}

    </div>
    <div class="form-group">
            <label  class="control-label">Password : </label>
            <input type="password" name="upass" class="form-control" [(ngModel)]="upass" #Pass="ngModel">
            <span class="help-block" *ngIf="Pass.invalid">Full Name is requried</span>
    </div>
    <div class="form-group">
            <input type="submit" value="submit" class="btn btn-primary">
    </div>
</form>