Dynamic adding new input field

#1

Hi guys, any way I could dynamically be adding a new input field. Perhaps with an add more button? Please help thankyou.

#2

Hi, @RobertLow

Try below Code :

View File

<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   (click)="Add()">Add More</button>
 <button ion-button full  (click)="goTo()" >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>

Componen File

  public anArray:any=[];

  constructor(public navCtrl: NavController){ }
  goTo(){
   console.log('this.anArray',this.anArray);
   this.data=true;
   }
 Add(){
   this.anArray.push({'value':''});
   }
4 Likes
Ionic: Adding form fields dynamically
#3

thankyou. This code is really helful to another user too.

#6

Working perfect, but how can we add remove (button) the generated inputs?

#7

splice.

#8

@rapropos yes splice is for the array but how to remove the inputs?

#9

founded

    this.anArray.splice(index, 1);
#10

this is working great!