Sending multiple records to Web API through Ionic - ionic-framework

Question

We are implementing a Investment Declaration module in mobile app. The Ionic developer has developed the investment declaration page which even has an option of multiple document adding. But now how will he send me(to API) the multiple details.
I have added the image of investment declaration form page for better understanding.
Investment Declaration Form image
This image is of our web application project. In web Application we are doing something like this:
Protected Sub btnApplyInvestment_Click(sender As Object, e As System.EventArgs) Handles btnApplyInvestment.Click
Try
Dim mEmpInvestmentDeclare As EmpInvestmentDeclare = ViewState("EmpInvestmentDeclare")
With mEmpInvestmentDeclare
.PayCareYearId = ViewState("yearId")
End With
Dim mEmpInvestmentDeclareDetails As EmpInvestmentDeclareDetails = mEmpInvestmentDeclare.EmpInvestmentDeclareDetails
Dim mEmpInvestmentDeclareDetail As EmpInvestmentDeclareDetail = Nothing
For Each rowHead As GridViewRow In gridDeclaredHead.Rows
Dim gridInvestment As GridView = Nothing
With rowHead
gridInvestment = .FindControl("gridInvestment")
If Not gridInvestment Is Nothing Then
Dim fieldIdHidden As HiddenField = Nothing
Dim txtAmount As TextBox = Nothing
For Each row As GridViewRow In gridInvestment.Rows
With row
fieldIdHidden = .FindControl("fieldIdHidden")
txtAmount = .FindControl("txtAmount")
If fieldIdHidden.Value = 26 Then
Dim m = 12
End If
If Not fieldIdHidden Is Nothing AndAlso Not txtAmount.Text.Length = 0 Then
'If CInt(txtAmount.Text) > 0 Then
mEmpInvestmentDeclareDetail = mEmpInvestmentDeclareDetails.GetEmpInvestmentDeclareDetailById(fieldIdHidden.Value)
With mEmpInvestmentDeclareDetail
.DeclaredAmount = Val(txtAmount.Text)
.PayCareYearId = ViewState("yearId")
.ApplyEdit()
End With
'End If
End If
End With
Next
End If
End With
Next
Dim temp As EmpInvestmentDeclare = mEmpInvestmentDeclare.Clone
mEmpInvestmentDeclare = mEmpInvestmentDeclare.Save()
Please can someone suggest something similar to this. Here we can simply loop through our grid and make a collection of the details which we later on save it.
But in Ionic we don't have a grid nor I can loop it. I am just stuck with this module.

Answer 1

I think in your case, you should use FormGroup.
import { Component } from '#angular/core';
import {Validators, FormBuilder, FormGroup } from '#angular/forms';
#Component({
template: `
<form [formGroup]="todo" (ngSubmit)="logForm()">
<ion-item>
<ion-label>Todo</ion-label>
<ion-input type="text" formControlName="title"></ion-input>
</ion-item>
<ion-item>
<ion-label>Description</ion-label>
<ion-textarea formControlName="description"></ion-textarea>
</ion-item>
<button ion-button type="submit" [disabled]="!todo.valid">Submit</button>
</form>
`
})
export class FormsPage {
private todo : FormGroup;
constructor( private formBuilder: FormBuilder ) {
this.todo = this.formBuilder.group({
title: ['', Validators.required],
description: [''],
});
}
logForm(){
console.log(this.todo.value)
}
}