how to enable and use mat-error withough using form control

Issue

I am using ngModel and I wanted to use mat-error but it does not work if you don't use form, is there some hack to it? that we can use the mat-error with the ngModel.

#code

<mat-form-field appearance="fill"  class="w-48per">
    <mat-label>First Name</mat-label>
    <input [(ngModel)]="territoryAssignmentFields.repmFirstName" name="repmFirstName" 
    matInput placeholder="" autocomplete="activityNumber">
    <!-- <div class="mat-form-field-subscript-wrapper custom-mat-error" >
        <div class="mat-error" >Required</div>                        
      </div>
    <div id="repmFirstNameRequiredError"></div>   -->
    <mat-error >My error message</mat-error>
</mat-form-field>

Solution

You can create a template variable in your input and use that in mat-error.

#nameCtrl="ngModel" 

You can use above variable in your mat-error like this:-

<mat-error *ngIf="nameCtrl.hasError('required')">required</mat-error>

Complete Sample code:-

<mat-form-field appearance="fill"  class="w-48per">
    <mat-label>First Name</mat-label>
    <input [(ngModel)]="territoryAssignmentFields.repmFirstName" name="repmFirstName"  #nameCtrl="ngModel" 
    matInput placeholder="" autocomplete="activityNumber">

    <mat-error *ngIf="nameCtrl.hasError('required')">required</mat-error>
</mat-form-field>

Answered By - Vimal Patel