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

Hello,

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" >
        <ion-item-group>
            <ion-item-divider>
                <ion-label>
                    Lichter
                </ion-label>
            </ion-item-divider>
            <ng-container *ngFor="let lightItem of lightItems">
                <ion-item>
                    <ion-input placeholder="Name" name="lightName[]" [(ngModel)]="lightItem.name"></ion-input>
                </ion-item>
                <ion-item>
                    <ion-label>Item</ion-label>
                    <ion-select placeholder="Item auswählen" name="lightItem[]" [(ngModel)]="lightItem.item">
                        <ion-select-option *ngFor="let item of items">{{item.name}}</ion-select-option>
                    </ion-select>
                </ion-item>
                <ion-button (click)="removeLight(lightItem.id)">Remove</ion-button>
            </ng-container>
        </ion-item-group>

        <ion-button (click)="addNewLight()">Add</ion-button>
</form>

@Component({
  selector: 'app-add-room',
  templateUrl: './add-room.page.html',
  styleUrls: ['./add-room.page.scss'],
})
export class AddRoomPage implements OnInit {

  items: Iitem[] = [];

  lightItems: IMultipleFormItem[] = [];

  addNewLight(): void {
    console.log(this.lightItems);

    this.lightItems.push(
      {
        id: this.lightItems.length,
        name: '',
        item: ''
      }
    );
    console.log(this.lightItems);
  }

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

}

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

1 post - 1 participant

Read full topic