Adding additional ion-input with a button

Ionic Framework ionic-v3
1

I am trying to add additional ion-inputs with a button.

image

I am getting this error with the following code below.

EXCEPTION: Error: Uncaught (in promise): Cannot assign to a reference or variable!

In the HTML file

    <ion-list>
        
        <!-- First attempt with the error -->
        <!-- EXCEPTION: Error: Uncaught (in promise): Cannot assign to a reference or variable! -->
        <!--
        <ion-item *ngFor="let myItem of myItemsList">
            <ion-input [(ngModel)]="myItem" type="text" placeholder="Add an item"></ion-input>
        </ion-item>
        <button small light (click)="addItem()" >Add item</button>
        -->
        
        <!-- Second attempt with same variable in all the ion-input -->
        <ion-item *ngFor="let myItem of myItemsList">
            <ion-input [(ngModel)]="anotherItem" type="text" placeholder="Add an item"></ion-input>
        </ion-item>
        <button small light (click)="addItem()" >Add item</button>
        
    </ion-list>

In the TS file

    myItemsList = [
        "First item",
        "Second item",
        "Third item"
    ];

    addItem() {
        this.myItemsList.push("");
    }

Anyone has an idea on what to do? How to achieve this?

2

I’m getting the same.
I can use ngModel but when I use it with ngFor which is looping through an array of strings, then I get this.
I want to be able to edit the strings in an array.
Any idea what is going on?

Shane

3

This doesn’t work because myItem is a local variable, and you can’t bind to local variables. Do this instead:

<ion-item *ngFor="let myItem of myItemsList; let i = index">
  <ion-input [(ngModel)]="myItemsList[i]" type="text"></ion-input>
</ion-item>
4

how can i add
when click on add button :
don’t know how much the user want to add input text maybe 2 and maybe 10

5

Sorry, I meant why I can’t type as in it is type one by one?