Angular array data binding

Question

I haven't understood why this code always prints only the first element of the array repeat two times ("AAA","AAA") Am I missing something ? Maybe I am using bad the data binding.

TS:

var x ="AAAA,BBBB";
this.items = x.split(',');

HTML:

<div   *ngFor="let item of items;let i = index">    
         <input [(ngModel)]="model.arrayListVariables [i]"  name="variable{{i}}" formControlName="variable" class="form-control" type="text">     
</div>

https://stackblitz.com/edit/angular-hzlzea

thanks

Your code seems fine. Not sure, why it isn't working. Can you create a replica on stackblitz? One suggestion, instead of [(ngModle)]="model.arrayListVariables [i]" try to use [(ngModle)]="item". — shhdharmen
– shhdharmen, Commented Jan 22, 2019 at 10:07
you can have a look to this stackblitz : stackblitz.com/edit/angular-hzlzea — Gelso77
– Gelso77, Commented Jan 22, 2019 at 10:32

shhdharmen · Accepted Answer · 2019-01-22 10:56:01Z

1

From your code of stackblitz, I found below issue.

You are using the same formControlName for both the inputs, i.e. variable. You need to use different names for different inputs.

So, I would suggest you make changes like below :

app.component.html

...
<div *ngFor="let item of items;let i = index">
    <input [(ngModel)]="item"  name="variable{{i}}" [formControlName]="'variable'+i" type="text">
</div>
...

app.component.ts

...
this.form = this.formBuilder.group({                                 
                  variable0: [''],
                  variable1: ['']
      });
...

I would also suggest not to use Template Driven and Reactive approach together in form. You can find out more at Introduction to forms in Angular.

answered Jan 22, 2019 at 10:56

shhdharmen

1,46110 silver badges21 bronze badges

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

1 Comment

Gelso77 Over a year ago

thank you so much i have to change something then :-)

Collectives™ on Stack Overflow

Angular array data binding

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related