How to bind array of empty string inputs to ngModel in Angular

Question

I am trying to bind an array of empty strings to ngModel in ngFor.

testObject.dynamicFields = ['','','',''];

HTML

<div *ngIf="testLabels.length > 0">
    <ng-container *ngFor="let item of testObject.dynamicFields; let i = index">
      <input
        *ngIf="testLabels[i]?.type === 'text'"
        [name]="'item_' + i"
        [(ngModel)]="(testObject?.dynamicFields)[i]"
      >
      <kendo-datetimepicker
        class="form-control m-b-20"
        [name]="'item_' + i"
        *ngIf="filterLabels[i]?.dataType === 'date'"
        [format]="'MM-dd-yyyy HH:mm:ss'"
        [(ngModel)]="(testObject?.dynamicFields)[i]"
      ></kendo-datetimepicker>
    </ng-container>
  </div>
</div>

I don't know where I'm doing wrong, when I enter a value in one textbox it is entering value in second textbox as well.

Answer 1

I will try to highlight why this happens:

I don't know where I'm doing wrong, when I enter a value in one textbox it is entering value in second textbox as well.

That's because both inputs are binded to the same item from dynamicFields .

Small steps:
The iteration is through the collection of dynamicFields . The item (from *ngFor="let item of testObject.dynamicFields ) represents a dynamicField . If that dinamicField would be an object with multiple properties (fields), then you could bind each input to a property, and they would update independently the model behind, but in the actual way, once both inputs are binded to the same model [(ngModel)]="(testObject?.dynamicFields)[i]" it's normal to see the change in the other input when update the other.

Another smell is the fact that the names for both inputs are the same. They should be different for each input.

I will reference the template driven forms official angular documentation for more details about Naming control elements .

As an example, if the template is modified to use for each model a property (field), then they would not interfere each other.

<div *ngIf="testLabels.length > 0">
    <ng-container *ngFor="let item of testObject.dynamicFields; let i = index">
      <input
        *ngIf="testLabels[i]?.type === 'text'"
        [name]="'fieldOne_' + i"
        [(ngModel)]="item.fieldOne"
      >
      <kendo-datetimepicker
        class="form-control m-b-20"
        [name]="'fieldTwo_' + i"
        *ngIf="filterLabels[i]?.dataType === 'date'"
        [format]="'MM-dd-yyyy HH:mm:ss'"
        [(ngModel)]="item.fieldTwo"
      ></kendo-datetimepicker>
    </ng-container>
  </div>
</div>

Attention: we can use the item itself and not the (testObject?.dynamicFields)[i] because it acts like a foreach , where item represents the iterated object, not only the index as with for .