Angular Material Mat-error Showing error for valid inputs, while validating with regex

Creating a signup form using angular material, It is displaying errors even if there is no error.

For a valid input it is displaying the error Invalid Input. I’ve removed that mat-error condition the field is turning red while entering data.

The status inside the control is showing the field is valid on submit.

The error conditions are in in global constants file. -Global const ts

export class globalConstants{
public static genericErr:string="Someting wnet wrong,Please try again";
public static usrname:string='[a-zA-Z0-9 ]*';
}

HTML-

<mat-form-field appearance="fill" fxFlex>
 <mat-label>User Name</mat-label>
<input matInput formControlName="usrname" required>
<mat-error *ngif="signUpForm.controls.usrname.touched && signUpForm.controls.usrename.invalid">
<span *ngIf="signUpForm.controls.usrname.errors.required">User Name is Mandatory</span>
<span *ngIf="signUpForm.controls.usrname.errors.pattern">Ivalid Input</span>
</mat-error>
</mat-form-field>}

Signup Ts File:

import { globalConstants } from '../shared/globalConst';
signUpForm: any = FormGroup;
ngOnInit(): void {
this.signUpForm = this.formBuilder.group({usrname: ['Enter Username', [Validators.required,  Validators.pattern(globalConstants.usrname)]],   
 

Kindly assist with your expertise.

Answer

Please check the following code

input-error-state-matcher.ts

import { Component } from '@angular/core';
import {
  FormGroup,
  FormBuilder,
  FormControl,
  FormGroupDirective,
  NgForm,
  Validators,
} from '@angular/forms';

/** @title Input with a custom ErrorStateMatcher */
@Component({
  selector: 'input-error-state-matcher-example',
  templateUrl: './input-error-state-matcher-example.html',
  styleUrls: ['./input-error-state-matcher-example.css'],
})
export class InputErrorStateMatcherExample {
  userAddressValidations: FormGroup;
  constructor(private formBuilder: FormBuilder) {}
  ngOnInit() {
    this.userAddressValidations = this.formBuilder.group({
      firstName: [
        '',
        [
          Validators.required,
          Validators.minLength(4),
          Validators.maxLength(20),
          Validators.pattern('[a-zA-Z]+'),
        ],
      ],
    });
  }
}

input-error-state-matcher.html

<form class="example-form" [formGroup]="userAddressValidations">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="First Name" formControlName="firstName">
    <mat-error *ngIf="userAddressValidations.get('firstName').hasError('required')">
      First Name is Required!
    </mat-error>
    <mat-error *ngIf="userAddressValidations.get('firstName').hasError('minlength')">
      First Name should be atleast 4 characters long!
    </mat-error>

    <mat-error *ngIf="userAddressValidations.get('firstName').hasError('maxlength')">
      First Name can be atmax n characters long!
    </mat-error>

    <mat-error *ngIf="userAddressValidations.get('firstName').hasError('pattern')">
      First Name must follow this pattern!
    </mat-error>
  </mat-form-field>

</form>

working example is here