Dynamic ion-input value getting

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

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

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.

it says can not read property value of undefined

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

thanks

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

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;
}

OMG thank you a lot! You saved my days!