Angular ngClass set dynamically

Question

I am using Angular 9.

Question

How do I populate the following:

[ngClass]="{'is-invalid': approvalEditFormGroup.get('userName[0][0]').touched && approvalEditFormGroup.get('userName[0][0]').invalid}"

As you can see, I have hard-coded 'userName[0][0]'. Is it possible to replace the 0 values with the i and j variables?

I have the following:

html

<input formControlName="{{getFieldName(i,j)}}" matInput [matAutocomplete]="auto" [ngClass]="{'is-invalid': approvalEditFormGroup.get('userName[0][0]').touched && approvalEditFormGroup.get('userName[0][0]').invalid}">

ts

  public getFieldName(i: number, j: number): string {
    return 'userName['+i+']['+j+']';
  }

Jelle · Accepted Answer · 2020-07-10 11:49:38Z

1

Now the i and j are just part of the string, so you need to use the actual i and j values

<input formControlName="{{getFieldName(i,j)}}" matInput [matAutocomplete]="auto" [ngClass]="{'is-invalid': approvalEditFormGroup.get('userName['+i+']['+j+']').touched && approvalEditFormGroup.get('userName['+i+']['+j+']').invalid}">

answered Jul 10, 2020 at 11:49

Jelle

2,2161 gold badge14 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

Angular ngClass set dynamically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related