Hi guys, any way I could dynamically be adding a new input field. Perhaps with an add more button? Please help thankyou.
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':''});
}
6 Likes
thankyou. This code is really helful to another user too.
Working perfect, but how can we add remove (button) the generated inputs?
@rapropos yes splice is for the array but how to remove the inputs?
founded
this.anArray.splice(index, 1);
this is working great!