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

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"  >
    <mat-label>First Name</mat-label>
    <input [(ngModel)]="territoryAssignmentFields.repmFirstName" name="repmFirstName" 
    matInput placeholder="" autocomplete="activityNumber">
    <!-- <div  >
        <div  >Required</div>                        
      </div>
    <div id="repmFirstNameRequiredError"></div>   -->
    <mat-error >My error message</mat-error>
</mat-form-field>

CodePudding user response：

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"  >
    <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>