Ionic 5 Dynamic Form Fields Template Driven [(ngModel)]


maybe I found a bug or I don’t see my mistake I have a form where you can add more fields with a button. Adding and removing also works fine. If a field is filled out now and I add a new field, the first field is empty again. But in the array where the data is stored the value is correct.What I found out is that if I leave out the form-tag it works. As soon as I make a form-tag for everything it doesn’t work anymore.
Someone has an idea. Enclosed my code.

<form #form="ngForm" >
            <ng-container *ngFor="let lightItem of lightItems">
                    <ion-input placeholder="Name" name="lightName[]" [(ngModel)]=""></ion-input>
                    <ion-select placeholder="Item auswählen" name="lightItem[]" [(ngModel)]="lightItem.item">
                        <ion-select-option *ngFor="let item of items">{{}}</ion-select-option>
                <ion-button (click)="removeLight(">Remove</ion-button>

        <ion-button (click)="addNewLight()">Add</ion-button>
  selector: 'app-add-room',
  templateUrl: './',
  styleUrls: ['./'],
export class AddRoomPage implements OnInit {

  items: Iitem[] = [];

  lightItems: IMultipleFormItem[] = [];

  addNewLight(): void {

        id: this.lightItems.length,
        name: '',
        item: ''

  removeLight(id: number): void {
    this.lightItems = this.lightItems.filter(item => != id);


export interface IMultipleFormItem {
  id: number;
  name: string;
  item: string;

I’ve experienced exactly what you’ve described, and found that this issue is likely because you’re not providing a dynamic and unique name to your data bound control. Try doing something like this for the name attribute of your data bound form controls:

<ion-select placeholder=“Item auswählen” name=“type_{{}}” [(ngModel)]=“lightItem.item”>

Reference: Angular

But they don’t explain this clearly for dynamic template driven forms.