如何将动态路由填充的文本框值通过Ng Form存入数据库？

问题根源分析 #

1. 表单绑定冲突+变量名错误：HTML中input同时使用[ngModel]和[(ngModel)]会导致双向绑定失效，且TagId输入框绑定的tagno是未定义变量，实际应为tagid。
2. 路由参数未同步到Service表单对象：组件拿到路由参数后仅赋值给自身变量，但表单绑定的是Service的formappetite对象，导致初始值未同步。
3. Service方法参数冗余：postappetite方法定义了参数但未使用，直接传递的formappetite未被正确赋值。

修复步骤 #

1. 修正HTML表单绑定 #

移除冲突的单向绑定语法，确保双向绑定直接指向Service的表单对象，同时修正变量名错误：

<form id="formId" #form="ngForm" (submit)="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>

2. 同步路由参数到Service表单对象 #

在DetailsComponent的ngOnInit中，直接将路由参数赋值给Service的formappetite对象：

// DetailsComponent.ts
ngOnInit() {
  this.route.queryParams.subscribe((params) => {
    this.service.formappetite.TagId = params['tagid'];
    this.service.formappetite.Typename = params['typename'];      
  });
}
// 可移除组件自身的tagid、typename变量，无需再单独维护

3. 修正Service的postappetite方法 #

移除冗余参数，确保传递的表单对象正确：

// service.ts
postappetite(){
  return this.http.post(this.baseurlanimal, this.formappetite);
}

4. 增强表单校验（可选） #

若需确保字段必填，可给input添加required属性：

<input id="Typename" name="Typename" [(ngModel)]="service.formappetite.Typename" required>    
<input id="TagId" name="TagId" [(ngModel)]="service.formappetite.TagId" required>

验证流程 #

1. 从CustomerComponent跳转至Details页面，确认路由参数正确携带。
2. 查看输入框是否已自动填充路由传递的TagId和Typename值。
3. 点击保存按钮，检查数据库对应字段是否成功存入数据。

内容的提问来源于stack exchange，提问作者Samal