Angular6+antd+java+SpringMVC，表单提交自动接收模型对象？

Z时代
2024-01-10
分类：IT

原谅我WEB小白提个简单的问题

前端使用Angular6 + antd 实现，后端使用java
前端为网格组件添加数据时是弹出antd的模态窗体，该模态窗体的内容部分(nzContent)
使用了自定义组件，该自定义组件中有一个input用来给用户输入的下面是该自定义组件的代码(其中只使用了angular的表单功能，没有使用antd的功能)：

<form [formGroup]="unit" (ngSubmit)="goSubmit()">
    <div>计量单位：<input type="text" formControlName="sid"></div>
    <button type="submit">自己的提交</button>
</form>

由于使用了antd，弹出的模态窗体中会在footer部出现两个按钮：
图片描述

上面表单中的input的name是sid，在java中model类的pulibc属性也是sid
不过java中的model类还有其他public属性，而这里的UI上只有一个sid属性
（这个应该不影响吧）
angular的ts文件中的发送请求的代码是：

goSubmit(){
    console.log("下面是angular表单数据：");
    console.log(this.unit.value);
    var reqUrl = 'http://localhost:8085/femis/unitUpdateByPrimaryKey';
    this.http.post(reqUrl,this.unit.value)
    .subscribe(
      val=>{
        console.log("这里是执行完毕的分支！");
      },
      error=>{
        console.log("这里是错误的分支：" + error);
      },
      ()=>{ console.log("这里是anyway的分支！"); }
    );  }

点击按钮“提交了啊”，请求成功发送的后端的java中了，下面是java代码：

    @PostMapping("/unitUpdateByPrimaryKey")
    public String updateByPrimaryKey(@ModelAttribute Unit unit) {
        System.out.println("进入了请求：/unitUpdateByPrimaryKey");
        System.out.println("传入的参数是：" + unit.toString());
        return "";    }

之后Eclipse的控制台中打印出：

进入了请求：/unitUpdateByPrimaryKey传入的参数是：Unit [sid=null, serialno=null, status=null, createdate=null, createcomputer=null, createuser=null]

我的疑惑：
前端的input上的value没有传递给后端？
整个过程没有报错，但是后端就是没有收到数据，如何解决？
困扰了两天了，thanks for any help!!

我的联系方式：
409223171@qq.com
QQ同上，微信同上

回答：

哎，真是心凉凉，在segmentfault上发的几个问题都是自己解决的。下面公布正确答案吧：

下面是angular中模板代码：

<form [formGroup]="unit" (submit)="goSubmit()">
  <div>计量单位：<input type="text" formControlName="sid"></div>
  <button type="submit">自己的提交</button></form>

下面是发送请求的代码：

goSubmit(){
  console.log("下面是angular表单数据：");
  console.log(this.unit.value);
  var reqUrl = 'http://localhost:8085/femis/unitUpdateByPrimaryKey';
  this.http.post(reqUrl,this.unit.value)
  .subscribe(
    val=>{
      console.log("这里是执行完毕的分支！");
    },
    error=>{
      console.log("这里是错误的分支：" + error);
    },
    ()=>{ console.log("这里是anyway的分支！"); }
  );}

下面是java端响应请求的代码：

 @PostMapping("/unitUpdateByPrimaryKey")
 public String updateByPrimaryKey(@RequestBody Unit unit) {
     System.out.println("进入了请求：/unitUpdateByPrimaryKey");
     System.out.println("传入的参数是：" + unit.toString());
     return ""; }