如何将带有动态路由数据的文本框的值保存到数据库中？

Question

tagid和typename Textboxes当前正在持有客户组件的路由值，但是当我单击“保存”按钮时，没有将其保存到数据库中。换句话说，将动态数据从客户组件将其路由到详细信息组件文本框成功，但它们并未保存在数据库中。它在数据库表中的各自字段中显示了零。我的要求是使用NG表单将动态路由数据保存在数据库中。以下是我尝试过的方法。

group1textbox

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 ');
}
}

尾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>

指望输出

tagid typename101 dairy sales please使用单个输入使用单个[(ngModel)]

	102

，这就是为什么它不能正确键入。

此外，请使用

Answer 1

防止默认表格提交诉讼。 Angular提交和NGSUBMIT事件之间的差异？

<form id="formId" #form="ngForm" (ngSubmit)="onSubmit(form)">
  <input  id="Typename" name="Typename" [(ngModel)]="service.formappetite.Typename">    
  <input  id="TagId" name="TagId" [(ngModel)]="service.formappetite.TagId">   
            
  <button type="submit" >Save</button>
</form>