Conditional Angular Material Error Message not working?

Question

I am trying to display a mat error depending on the type of validator met. One validator being required (will display if field is touched and left empty) and another maxLength (which will display if the field has been touched and over 20 characters have been entered) - each scenario should display a different mat error message.

Firstly, I have my form group itself (in the component.ts), with the form control and its respective validators:

this.addBranchDetailsForm = this.fb.group({
     branchName: ['', Validators.required, Validators.maxLength(20)]
});

Secondly, inside the component.html file, I have the Mat Form Field which makes reference to the aforementioned form group and control:

<form [formGroup]="addBranchDetailsForm">
     <mat-form-field hintLabel="Enter the new branch name">
          <mat-label>Branch Name</mat-label>
          <input matInput #input maxlength="30" formControlName="branchName">
          <mat-hint align="end">{{input.value?.length || 0}}/30</mat-hint>
          <mat-error *ngIf="branchName">{{formOneErrorMessage()}}</mat-error>
     </mat-form-field>
</form>

And then lastly, i have the "formOneErrorMessage" method in my component.ts file, which is responsible for the conditional error handling:

formOneErrorMessage() {
      if (this.addBranchDetailsForm.get('branchName')?.hasError('required')) {
        return 'Enter new branch name';
      }
      else if (this.addBranchDetailsForm.get('branchName')?.hasError('maxLength')) {
        return 'The new branch name may not be more then 20 characters';
      }
    }

The issues I have are as follows:

Within the component.html file, with regards to the reference made to the "branchName" within the ngIf of the mat error, it says "Property 'branchName' does not exist on type 'CreateBranchComponent'.ngtsc(2339)".

Similarly, with reference made to the "formOneErrorMessage()" method within the mat error itself, it says "Property 'formOneErrorMessage' does not exist on type 'CreateBranchComponent'.ngtsc(2339)".

Lastly. Looking at the "formOneErrorMessage()" method within the component.ts file, the returns are throwing errors as well, stating: "Type 'string' is not assignable to type 'void'.ts(2322):"...

My suspicion is that I am not referencing the branchName form control correctly in the "formOneErrorMessage()" method.. Although, otherwise I am quite unsure.

SeventhWarhawk SeventhWarhawk · Accepted Answer · 2021-08-04T11:36:01

I ended up using the following (in component.ts):

public errorHandling = (control: string, error: string) => {
    return this.addBranchDetailsForm.controls[control].hasError(error);
  }

And then within the component.html:

<mat-form-field hintLabel="Enter the new branch name">
                <mat-label>Branch Name</mat-label>
                <input matInput #input maxlength="30" formControlName="branchName">
                <mat-hint align="end">{{input.value?.length || 0}}/30</mat-hint>
                <mat-error *ngIf="errorHandling('branchName','required')">
                  Branch Name may not be empty
                </mat-error>
                <mat-error *ngIf="errorHandling('branchName','maxlength')">
                  Branch Name may not be more than 20 characters
                </mat-error>
              </mat-form-field>

Conditional Angular Material Error Message not working?

1 Answers