How to save the value of textbox with dynamic route data into database?

Tagid and typename textboxes are currently holding routed values from customer component, but are not being saved into the database when I clicked on save button. In other words, routing the dynamic data from customer component to details component textboxes were successfully, but they are not saving in the database. It is showing null in their respective fields in the database table. My requirement is to save the dynamic route data in typename and tagid textbox into database using Ng Form. Below are methods I had tried.

group1 textbox

Textbox1 Textbox2
tagid= '103', Typename= 'Store keeping',


CustomerComponent.ts

onClick2(event: MouseEvent, data: any) {
this.router.navigate(['/details'], { queryParams: { tagid: data.TagId, typename: data.Typename}
});


DetailsComponent.ts

public typename: string;
public tagid: string;

ngOnInit() {
this.route.queryParams.subscribe((params) => {
this.tagid = params['tagid'];
this.typename= params['typename'];
});
}

onSubmit(form: NgForm){
this.service.formSubmitted = true;

//appetite
if (form.valid) {
this.service.postappetite()
.subscribe({next: res => {
console.log(res);
this.toastr.success('Saved Successful');

},

error: err => {console.log(err)}
})
}
else {
this.toastr.error('Please Enter Your Data ');
}
}


Details html

<form id="formId" #form="ngForm" (submit)="onSubmit(form)">
<input id="Typename" name="Typename" [ngModel]="typename" [(ngModel)]="service.formappetite.Typename">
<input id="TagId" name="TagId" [ngModel]="tagno" [(ngModel)]="service.formappetite.TagId">

<button type="submit" >Save</button>
</form>


Expected output

TagId Typename
101 Dairy
102 Sales

Continue reading...