Dynamic ion-input value getting


#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,


#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.