Form Invalid Input Conditional Coloring Angular/Materialize

I'm using Reactive Forms in Angular and I'm trying to change the color of the input field if the input is touched and unfocused and left empty.

I was looking through the documentation of material.angular.io and implemented it but it still doesn't change the color like in the documentation?

I can see the < mat-error> element but the color does not change. Is there a non-hacky way of doing the colors?

Documentation source:
https://material.angular.io/components/form-field/overview#form-field-error

Component (.html)

<form [formGroup]="reactiveForm" (ngSubmit)="submit()">
    <mat-form-field >
        <input matInput [formControl]="firstName" type="text">
        <mat-error>Error</mat-error>
    </mat-form-field>
   </form>

Component (.ts)

    export class PersonFormComponent {
    
    firstName = new FormControl(null, Validators.required)

      reactiveForm: FormGroup = new FormGroup({firstName: this.firstName});
}

I have declared MatInputModule in the imports of @NgModule in app.module.ts:

import { MatInputModule } from '@angular/material/input';

What I have tried:

Adding required keyword to the input:

<input matInput [formControl]="firstName" type="text" required >

I would have tried to use custom classes according to the status of touched and focus to change the color by custom ones:

<form [formGroup]="reactiveForm" (ngSubmit)="submit()">
    <mat-form-field >
        <input matInput [formControl]="firstName" type="text" 
            [class.ng-touched]="firstName.touched && !firstName.focus" 
            [class.ng-untouched]="!firstName.touched">
        <mat-error>Error</mat-error>
    </mat-form-field>
</form>

You are missing the required attribute on the input tag.

<mat-form-field>
    <input matInput [formControl]="firstName" type="text" required>
    <mat-error>Error</mat-error>
</mat-form-field>

I changed the .ts to:

  reactiveForm: FormGroup = this.formBuilder.group({
    firstName : ["", Validators.required]
  });


  isFirstNameValid(){
    if(this.reactiveForm.get("firstName")?.touched && this.reactiveForm.get("firstName")?.valid == false){
      return false;
    }
    return true;
  }

Changed the .html to:

    <input formControlName="firstName" matInput type="text" [ngClass]="{'ng-invalid' : isFirstNameValid()}">

Now it works as expected.