Add More Functionality in Ionic?

Add more functionality means you can dynamically add input fields where values are different. In this blog, u see how forms add new fields and dynamically generated a list of input fields. Please follow the following steps.

Step 1: You first add form in your HTML and also dynamically add the list.




Charge per session

Price Session price is required

Duration Session time is required

Delete Entry

Please Note:

Prorated charges will be applicable for every minute exceeding the pre-defined session charge.

Add more pricing options

0">

Charge per session

Price

Duration

Delete Entry

Step 2:

Add the form validation function in ts page. Add more function also present in ts page.

addNewRowInPrice(){
if(!this.pricingFormFlag){
this.pricingFormFlag=true;
}else{
if(this.sessionPrice && this.sessionTime){
this.pricingList.push({
call_duration: this.sessionTime,
price: this.sessionPrice
});
console.log(this.pricingList);
this.sessionTime='';
this.sessionPrice='';
this.pricingFormFlag=false;
}
}
}
submitNewPricing(form: NgForm) {
if (form.invalid) {
if(this.pricingList.length>0 && this.baseCurrency && this.basePrice && !this.pricingFormFlag){
this.submitApiForPricing(form);
}else{
//console.log(form);
return;
}
} else {
if(this.sessionPrice && this.sessionTime){
this.pricingList.push({
call_duration: this.sessionTime,
price: this.sessionPrice
});
this.submitApiForPricing(form);
}else{
this.submitApiForPricing(form);
}
}
}

In the above code, u see the pricingList array. This array dynamically pushes the value of the array. In this array, you see the call_duration and price that value is different for different positions. This array loop is present in HTML. And form value adds this array for view generated.

Conclusion:

In these two images, u see the price and Duration values are dynamic. Please Note that ngModel binding is different in form and list both are different in HTML code. Please follow How I binding data.

We can use the code for Ionic mobile app development.