mat-error not displaying error message angular 5

<mat-error> content is only displayed when control is touched or when form is submitted. *ngIf condition can be specified, it is not the issue. To display <mat-error> content for instance when you click on another button than the submit one, simply mark the desired control(s) as touched in the handler of the button:

onMyButtonClick() {
  this.form.get('myControl').markAsTouched();
  ...
}

Another way to display a message under the control without any contrainst linked to Angular validity management, is to use <mat-hint> instead of <mat-error>

You have a typo on formControlname. Its formControlName with uppercase N.

forked stackblitz

advice :

You should not add *ngIf on mat-error. The whole point of mat error is to avoid doing such thing.

and you should use mat-form-field component to wrap your input

so can you try simply :

<form [formGroup]="formPersonalRecord">
    <mat-form-field class="full-width-input">
       <input matInput placeholder="First Name" formControlName="firstName" />
          <mat-error>
                Please provide name.
          </mat-error>
    </mat-form-field>
...

This might be late but I'm having the same issue and found out that I have to bind my input [formControl] to the formGroup first before getting the formControl like so :

<form [formGroup]="formPersonalRecord">

 <mat-input-container class="full-width-input">
   <input matInput placeholder="First Name" [formControl]="formPersonalRecord.get('firstName')">
   <mat-error *ngIf="formPersonalRecord.get('firstName').hasError('required')">
      Please provide name.
   </mat-error>
 </mat-input-container>

Also, mat-error does not display until either the control is touched (blurred), or the form is submitted.