Angular Validation Error: Parse error required and min length-CodePudding

I have this question on a form that needs to be validated, which I'm trying to do below:

      <div >
      <div >
        <h5>1. Requestors Name (Your name or JHED ID)</h5><p >*</p>
      </div>
      <input type="text"  id="requestorName" name="requestorName" required minlength="2"
             [(ngModel)]="model.requestorName" #requestorName="ngModel"/>
    </div>
    <div *ngIf="requestorName.invalid && (requestorName.dirty || requestorName.touched)"
         >

      <div *ngIf="requestorName.errors?.['required']">
        Requester name is required.
      </div>
      <div *ngIf="requestorName.errors?.['minlength']">
        Requester name must be at least 2 characters long.
      </div>

    </div>

I made this using the examples here: https://angular.io/guide/form-validation

However, when I try to load the page I get this error:

NG5002: Parser Error: Expected identifier for property access at the end of the expression [requesterName.errors?.['minlength']]

If I remove the min length div I still get the same exact error but for expression [requesterName.errors?.['required']]

What am I missing or what have I done wrong here? There are a lot of similar questions on this, but they all have solutions that say something like "use *ngIf="email.errors?.['required']"" as in this question: Angular validation error: Property Required, and Parser Error but I'm already doing that.

What is different in mine?

CodePudding user response：

Try requesterName?.errors?.required

CodePudding user response：

You're using two different variables:

requesterName and requestorName

<input type="text"  id="requestorName" name="requestorName" required minlength="2"
         [(ngModel)]="model.requestorName" #requesterName="ngModel"/>