Showing required validation message in dynamically generated checkbox in angular reactive form

I have created an angular project in version 13. I have followed the link (https://coryrylan.com/blog/creating-a-dynamic-checkbox-list-in-angular) to create a form with a dynamically generated checkbox. The checkbox is working fine. The dynamically generated checkbox has required validation. Now I would like to show the required validation message. Here is my code:

<form [formGroup]="form" (ngSubmit)="submit()">
  <label formArrayName="orders" *ngFor="let order of ordersFormArray.controls; let i = index">
    <input type="checkbox" [formControlName]="i" />
    {{ordersData[i].name}}
  </label>

  <span *ngIf="ordersFormArray.errors?.required"> At least one order must be selected </span>

  <br />
  <button type="submit">submit</button>
</form>

But I am getting the below error:

Property 'required' comes from an index signature, so it must be accessed with ['required']. <span *ngIf="ordersFormArray.errors?.required">

If you look at the error it says property comes from index signature, must be accessed with ['required']. And that is the solution actually. Since v13, many errors have been made meaningful too plus that's the correct way to access it now. I have shown old and new way below.

So actually that's is what needs to be addressed.

The old way

<div *ngIf="ordersFormArray.errors?.required"> At least one order must be selected</div>

The new way

<div *ngIf="ordersFormArray.errors?.['required']">At least one order must be selected</div>