Syntax for using variable names for error checking

Question

I am building dynamic input fields with a mandatory check inside ngFor. I have built names using field{{idxVar}} where idxVar is index but how do I use this for checking error

<span [ngClass]="{'active' : field{{idxVar}}.errors}">*Mandatory</span>
<input type="text" [required]="itmVar.is_required ? 'required' : null" name="field{{idxVar}}" [(ngModel)]="user.customFields[idxVar]"
            #field{{idxVar}}="ngModel">

In above, I know this is not the right method which gives error but want to know the right syntax for this

'active' : field{{idxVar}}.errors

Take a look at this article. It may help you refresh your mind. msdn.microsoft.com/en-us/magazine/mt847185.aspx — wannadream
– wannadream, Commented Sep 5, 2018 at 17:37

Suresh Kumar Ariya · Accepted Answer · 2018-09-05 17:48:57Z

1

For NgModel inside *ngFor, you can use unique template reference variable. Each input field is associated to the corresponding template reference, array index is not required.

<div *ngFor="let idxVar of valueArray">
  <span [ngClass]="{'active' : field.errors}">*Mandatory</span>
    <input type="text" name="field{{idxVar}}" [ngModel]="valueArray[idxVar]"
                #field="ngModel" (ngModelChange)="callback(field)">
    <div>{{ field.control.errors | json }}</div>
</div>

Here is the stackblitz code https://stackblitz.com/edit/angular-a4skhz

edited Sep 5, 2018 at 17:48

answered Sep 5, 2018 at 17:41

Suresh Kumar Ariya

9,8041 gold badge22 silver badges28 bronze badges

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

Comments

rayray · Accepted Answer · 2018-09-05 18:23:58Z

0

It's not completely clear what you are trying to do but it seems what would work best for you would be to create an object fields with keys of numbers, corresponding to the indices you want to check on.

In your controller, have a fields object.

Then your template code would become something like

<span [ngClass]="{'active' : field[idxVar].errors}">*Mandatory</span>
<input type="text" [required]="itmVar.is_required ? 'required' : null" name="field[idxVar]" [(ngModel)]="user.customFields[idxVar]">

Here's a quick example in Stackblitz https://stackblitz.com/edit/angular-p4zemy

If this answer satisfies your needs, please be sure to mark it as accepted.

edited Sep 5, 2018 at 18:23

answered Sep 5, 2018 at 18:17

rayray

1,8551 gold badge12 silver badges17 bronze badges

Collectives™ on Stack Overflow

Syntax for using variable names for error checking

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