Q:

Angular array data binding

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 

A:

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.

