Getting dynamically created ion-input value in IONIC2

Question

I have the following HTML part in which ion-item is created dynamically based on *ngFor

<ion-list *ngIf="Label_view">

  <ion-item style="Float:Right;margin-left: 4%;" *ngFor="let bil of arr_label;let i=index ">
    <ion-label floating>{{bil}}</ion-label>
    <ion-input [(ngModel)]="array" id={{i}}  type="text"  maxlength="5"></ion-input>
  </ion-item>

Register

I have to get values of ion-input into component .I have used [(ngModel)] value to bind to array.

My component side

array:any[]=[];

Blr_regis()
{
    console.log( array);
  //  console.log(document.getElementById("1").Value);
    var x=document.getElementById("1").Value;
   console.log(x);
}

I'm getting UNDEFINED as console Output. Is there something am missing?

You are getting undefined because you put an array as an ngmodel. It should be a string or a number. Like [(ngModel)]="bil.Id" — misha130
– misha130, Commented Jul 6, 2016 at 5:23

Meryan · Accepted Answer · 2017-05-15 00:17:50Z

The issue is because you're trying to bind an Array with the input element. It should be bound to a string or a number (or a single position of the array).

Instead of doing something like this:

  <ion-item style="Float:Right;margin-left: 4%;" *ngFor="let bil of arr_label;let i=index ">
    <ion-label floating>{{bil}}</ion-label>
    <ion-input [(ngModel)]="array" id={{i}}  type="text"  maxlength="5"></ion-input>
  </ion-item>

And having those two let in the *ngFor, why don't you put everything together in the same array like this:

this.newArray : Array<{id: number, value: string}> = [];

// Assuming the `arr_label` exists and it has been properly initialized
for(let i=0; i < arr_label.length; i++) {
    this.newArray.push({ id: i, value: arr_label[i] });
}

And then in your view:

  // We only iterate over the newArray because all the information we need is there
  <ion-item style="Float:Right;margin-left: 4%;" *ngFor="let bill of newArray">

    <ion-label floating>{{bill.value}}</ion-label>
    <ion-input [(ngModel)]="array[bill.id]" type="text" maxlength="5"></ion-input>

  </ion-item>

Notice we're now binding the input to a single position of the array, using the id (which would be 0, 1, and so on).

You can find a working plunker here. Take a look at the code in Page1.ts and Page1.html

Collectives™ on Stack Overflow

Getting dynamically created ion-input value in IONIC2

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related