Dynamic ion-input value getting

Ionic Framework ionic-v3
1

I listed some ion-input fields dynamically,the number of fields and type of the field is came from server i successfully listed the items but now i want to get the value from that dynamic inputs.how can i get those fields values

2

HI, @suseelan

If you want add dynamic ion-input

View file :

<ion-content>
  <ion-item>
    <ion-label color="primary">Add Dynamic</ion-label>
  <ion-input type="text"  text-right [(ngModel)]="lenofarr"></ion-input>
</ion-item>
<button ion-button   (click)="Add(lenofarr)">Add</button>

  <ion-item *ngFor="let att of anArray; let idx = index">
      <ion-label color="primary">{{att.label}}{{idx+1}}</ion-label>
      <ion-input type="text"  text-right  [(ngModel)]="anArray[idx].value"></ion-input>
  </ion-item>
  <button ion-button full  (click)="goTo()" *ngIf="btn">let's go</button>

<ion-card *ngIf="data">
  <ion-item *ngFor="let att of anArray;">
    <div class="card-title">{{att.value}}</div>
  </ion-item>
</ion-card>
</ion-content>

Component file :

export class ListPage {

  public anArray:any=[];

  public lenofarr:any;
  btn:any
  data:any;
  constructor(public navCtrl: NavController, public navParams: NavParams) {

    console.log('this.anArray',this.anArray);
    this.btn=false;
    this.data=false;
  }
  goTo(){
    console.log('this.anArray',this.anArray);
    this.data=true;
  }
  Add(key){
      console.log('key',key)
      for(let i =0;i<key;i++){
        this.anArray.push({label:'Name',value:''});
      }
      console.log('this.anArray',this.anArray);
      this.btn=true;
  }
}

Hope, this will resolve your issue

Thanks,

2 Likes
3

Hi, is there way that I need input field on the html page but I do not know how many i need so it will automatically increase 1 field. And these data will be able to pass to other pages. Thankyou.

4

it says can not read property value of undefined

5

How to sum two fields in ionic and show the result in third text without submit.

thanks

6

putting the code inside a function and calling it after constructor or inside some life cycle event

7

Please give me hints :-1:
home.html
<ion-item><ion-input placeholder=“Big” value="" formControlName=“ubigdata” ></ion-input></ion-item>
<ion-item><ion-input placeholder=“Small” value="" formControlName=“usmalldata” ></ion-input></ion-item>
<ion-item>
<ion-input placeholder=“Total” formControlName=“total” (keyup)=“0”></ion-input>
</ion-item>
home…ts
onSubmit(){
console.log(this.user.value);
let ubigdata = Number(this.user.value[‘ubigdata’]);
let eusmalldata = Number(this.user.value[‘usmalldata’]);
let total = ubigdata + eusmalldata;
}

8

OMG thank you a lot! You saved my days!