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

Question

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

Wahab Shah · Accepted Answer · 2022-04-30 09:44:47Z

1

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>

answered Apr 30, 2022 at 9:44

Wahab Shah

2,2861 gold badge19 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ardit · Accepted Answer · 2022-04-30 09:32:14Z

1

Change it to this: *ngIf="ordersFormArray.errors?.['required']" This is the correct way in Angular13.

answered Apr 30, 2022 at 9:32

Ardit

3915 silver badges10 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related