Angular Validation Error: Parse error required and min length

Issue

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

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

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

Solution

Try requesterName?.errors?.required

Answered By - Pouya Kermanshahi