Angular 13调用PUT接口时出现400（Bad Request）错误求助

核心原因：前后端参数传递方式不匹配 #

你的后端editExperiencia接口使用@RequestParam接收参数，这意味着它期望从URL查询参数或**表单编码（application/x-www-form-urlencoded）中获取数据，但前端Angular的HttpClient.put默认是将expLab对象作为JSON请求体（application/json）**发送的，后端无法从请求体中解析出@RequestParam声明的参数，因此返回400错误。

次要问题：前端表单缺失必填字段 #

后端接口要求接收localidad参数，但你的前端编辑表单中没有对应的输入框，导致expLab.localidad的值为空或undefined，即使传递方式正确，后端也会因为缺少必填参数返回400。

额外问题：Angular表单用法冲突 #

你在HTML表单中同时使用了[(ngModel)]和formControlName，这在Angular响应式表单中属于不规范写法，可能导致数据同步异常，建议只使用响应式表单的formControlName绑定数据。

解决方案 #

1. 调整后端接口参数接收方式
   将后端的@RequestParam改为@RequestBody，直接接收JSON格式的请求体：

   @PutMapping("/editar/{id}")
   public Experiencia editExperiencia (@PathVariable int id, @RequestBody Experiencia expeActualizado) {
       Experiencia expe = servexp.findExperiencia(id);
       
       expe.setNombreE(expeActualizado.getNombreE());
       expe.setDescripcionE(expeActualizado.getDescripcionE());
       expe.setInicio(expeActualizado.getInicio());
       expe.setFin(expeActualizado.getFin());
       expe.setLocalidad(expeActualizado.getLocalidad());
       expe.setImg(expeActualizado.getImg());
       
       servexp.saveExperiencia(expe);
       return expe;
   }
   

2. 补充前端表单字段
   在HTML表单中添加localidad输入框：

   <div class="mb-3">
     <div class="form group">
       <label for="localidad" class="form-label">Localidad</label>
       <input class="form-control form-control-sm" id="localidad" formControlName="localidad" type="text">
     </div>
   </div>
   

   同时在TS的表单构建器中添加该字段：

   this.form= this.formBuilder.group({
     nombreE:[''],
     inicio:[''],
     fin:[''],
     descripcionE:[''],
     img:[''],
     localidad:[''] // 添加此字段
   })
   

3. 规范Angular表单用法
   移除[(ngModel)]，改用响应式表单获取数据，修改onUpdate方法：

   onUpdate(): void{
     const id = this.activatedrouter.snapshot.params['id'];
     // 从form.value获取表单数据
     const experienciaActualizada = this.form.value;
     experienciaActualizada.id = this.expLab.id;
     this.sExperiencia.update(id, experienciaActualizada).subscribe(
       data=>{
         this.router.navigateByUrl('/dashboard');
       }, err =>{
         this.router.navigateByUrl('/dashboard');
       }
     )
   }
   

   HTML中仅保留formControlName：

   <input class="form-control form-control-sm" id="img" type="text" formControlName="img">
   

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