How to insert value in multiple textboxes with different unique ID into database?

My requirement is to insert the value of name textbox, type textbox, store textbox into the database at once. For instance, the following textboxes are holding values that are expected to be saved into the database table at a time when save button on the form is clicked. I need help on how to write the code to execute this.

Name= 'Apple' Type= 'Fruit' Store= 'Bin A'
Name= 'Hammer' Type= 'Tool' Store= 'Bin C'
Name= 'Porsche ' Type= 'Car' Store= 'Garage A'


See below codes that l had tried

service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Note, } from './animal';

@Injectable({
providedIn: 'root'
})
export class Service {

constructor(private http:HttpClient) { }

formNote:Note = new Note();
formSubmitted: boolean = false;

readonly Urlnote = 'http://localhost:500/api/StockAPI'

postNote(formNote: any){
console.log(formNote);
return this.http.post<any>(this.Urlnote,formNote);
}
}


app.componet.ts

import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { FormControl, FormGroup, Validators, FormsModule, AbstractControl, FormBuilder, NgForm } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
import { Service } from 'src/app/service';
import { Router,ActivatedRoute } from '@angular/router';

@Component({
selector: 'app-add',
templateUrl: './add.component.html',
styleUrls: ['./add.component.css'],
})
export class AddComponent implements OnInit {

constructor(private service:Service, private toastr: ToastrService, private router: Router, private route: ActivatedRoute) { }

ngOnInit() {

}

public orderForm = new FormGroup({
Id: new FormControl(0),
Name: new FormControl(null),
Type: new FormControl(null),
Store: new FormControl(null),
});

submitted = false;
get registerFormControl() {
return this.orderForm.controls;
}

onSubmit() {
this.submitted = true;
if(this.orderForm.value.Id == 0){
this.service.postMeasure(this.orderForm.value).subscribe((result) =>{
console.log(result);
this.toastr.success('Saved');
});
}
else
{
this.toastr.error('Please Enter Your Data ');
}
}
}


html

<form [formGroup]="orderForm" (submit)="onSubmit()">
<input type="hidden" name="Id" formControlName="Id">
<input id="Name" name="Name" formControlName="Name">
<input id="Type" name="Type" formControlName="Type" >
<input id="Store" name="Store" formControlName="Store" >
<div class="row">
<div >
<div style="float: right;">
<button class="samplebtn e-control e-btn e-success" type="submit" style="height:35px;width: 110px;"
data-ripple="true">Save</button>
</div>
</div>
</div>
</form>


Expected output

Id Name Type Store
1 Banana Fruit Bin H
2 Spoons Cutlery Bin K
3 Apple Fruit Bin A
4 Hammer Tools Bin C
5 Porsche Car Garage A

Continue reading...