I want to create a text filed when user click on a button like add more on that time generate a text field.
How can i do that.
please help me out
Thanks
<ion-content padding>
<ion-row>
<ion-col col-10>
<ion-item>
<ion-label>Enter Name</ion-label>
<ion-input type="text" text-right [(ngModel)]="doc_name[0]" id="doc_name[0]" name="doc_name[0]" required></ion-input>
</ion-item>
</ion-col>
<ion-col col-2>
<button class="btn btnpos" (click)="selectNo1(1);" ion-button><ion-icon style="color: #fff" name="md-add"></ion-icon></button>
</ion-col>
</ion-row>
<ion-row *ngFor="let item of MySelect1;" class="myrow">
<ion-col col-10>
<ion-item>
<ion-label>Enter Name</ion-label>
<ion-input type="text" text-right [(ngModel)]="doc_name[item]" id="doc_name[{{item}}]" name="doc_name[{{item}}]" required></ion-input>
</ion-item>
</ion-col>
<ion-col col-2>
<button class="btn btnpos" ion-button (click)="selectNo1(0);"><ion-icon style="color: #fff" name="md-remove"></ion-icon></button>
</ion-col>
</ion-row>
</ion-content>
//home.ts
----variables
MySelect1:any=[];
moreIndex1:any=1;
doc_name:any=[];
selectNo1(val1){
if(val1==1)
{
this.MySelect1.push(this.moreIndex1);
this.moreIndex1++;
}
else{
this.MySelect1.pop(this.moreIndex1);
this.moreIndex1--;
}
}
how can i add Three (3) filed at a time
//home.html
<ion-content padding>
<ion-row>
<ion-col col-10>
<ion-item>
<ion-label>Enter Name</ion-label>
<ion-input type="text" text-right [(ngModel)]="doc_name[0]" id="doc_name[0]" name="doc_name[0]" required></ion-input>
</ion-item>
</ion-col>
<ion-col col-2>
<button class="btn btnpos" (click)="selectNo1(1);" ion-button><ion-icon style="color: #fff" name="md-add"></ion-icon></button>
</ion-col>
</ion-row>
<ion-card *ngFor="let item of MySelect1; let i=index; ">
<ion-row >
<ion-col col-10>
<ion-item>
<ion-label>Enter Name</ion-label>
<ion-input type="text" text-right [(ngModel)]="doc_name[item]" id="doc_name[{{item}}]" name="doc_name[{{item}}]" required></ion-input>
</ion-item>
</ion-col>
<ion-col col-2>
<button class="btn btnpos" ion-button (click)="selectNo1(0);"><ion-icon style="color: #fff" name="md-remove"></ion-icon></button>
</ion-col>
</ion-row>
<ion-item>
<ion-label style="padding-left: 10px;">Enter Doc. Address</ion-label>
<ion-input type="text" text-right [(ngModel)]="doc_add[item]" name="doc_add[{{item}}]" required></ion-input>
</ion-item>
<ion-item>
<ion-label style="padding-left: 10px;">Contact</ion-label>
<ion-input type="number" text-right [(ngModel)]="doc_cont[item]" name="doc_cont[{{item}}]" required></ion-input>
</ion-item>
</ion-card>
</ion-content>
//home.ts
MySelect1:any=[];
moreIndex1:any=1;
doc_name:any=[];
doc_add:any=[];
doc_cont:any=[];
selectNo1(val1){
if(val1==1)
{
this.MySelect1.push(this.moreIndex1);
this.moreIndex1++;
}
else{
this.MySelect1.pop(this.moreIndex1);
this.moreIndex1--;
}
}
2 Likes