Angular 13 Reactive Form Validation Parser Error: Unexpected token [, expected identifier or keyword-CodePudding

I'm Trying Angular Form Validation with Reactive form. I can't resolve an error I'm facing, can anyone help, please? My Code Snippet is attached below,

HTML:

<form [formGroup]="voucherDetailsForm">
        <div >
            <label > Project: </label>

            <ng-select  id="project" 
            
            ngClass="{
                'form-control': true, 
                'is-invalid': !voucherDetailsForm.controls.project.valid && voucherDetailsForm.controls.project.touched, 
                'is-valid': voucherDetailsForm.controls.project.valid
            }" 
            
            [(ngModel)]="selectedProject" placeholder="-Select Project-"
                formControlName="project" (search)="onProjectSearch($event.term, 1,false)"
                (change)="onProjectChange($event)" bindLabel="text" (scrollToEnd)="onScrollProjectToEnd()">
                <ng-option *ngFor="let project of projectList" [value]="project">
                    {{project.projectRefCode}}-{{project.name}}
                </ng-option>
            </ng-select>
            <div *ngIf="voucherDetailsForm.['controls'].project.errors?.required">Project Required</div>
        </div>
    </form>

And My Ts Code:

this.voucherDetailsForm = this.formBuilder.group({
  project: [null, Validators.required]
})

CodePudding user response：

 <div *ngIf="voucherDetailsForm.['controls'].pr ...

<div *ngIf="voucherDetailsForm['controls'].pr ...