Angular：在发布请求时获得 Http 400 错误请求

Question

I have a form as follows

<form #demoForm = "ngForm" (ngSubmit) = "onClickSubmit(demoForm.value)" >
        <input type = "text" name ="fruit" id="add" placeholder = "Enter fruit name" ngModel>
        <input type = "submit" value = "add">
</form>

and following method gets invoked on form submission

onClickSubmit(data) {
  alert("Entered Fruitname : " + data.fruit);
  console.log(data);
  this.ob = this.http.post("http://localhost:8080/demo/add", data).subscribe();

}

It logs {fruit: "apple"} in console on form submission with input value apple however I'm getting http 400 bad request on form submission. Error I'm getting is

error: "Bad Request"
message: "Required String parameter 'fruit' is not present"
path: "/demo/add"
status: 400

Even though the object contains a fruit field as shown in the log, why is it still resulting in error

Spring controller is

    @Controller 
    @CrossOrigin(origins="*")
    @RequestMapping(path="/demo")
    public class MainController {
      @Autowired
      private FruitsRepository fruitsRepository;

      @PostMapping(path="/add") 
      public void addNewUser(@RequestParam String fruit) {
          Fruits fruits=new Fruits();
          fruits.setName(fruit);
          fruitsRepository.save(fruits);
    }
}

how to solve this issue?

Answer 1

You are sending the whole object, not only t he name.
{fruit: "apple"} is not a string, it is an object.

To send only the fruit name (and so, a string), do the POST that way:

this.ob = this.http.post("http://localhost:8080/demo/add", data.fruit).subscribe();

Answer 2

@RequestParam String fruit expects a query parameter, not a value inside the request body. Ie a request with the path http://localhost:8080/demo/add?fruit=apple , not {"fruit": "apple"} posted to http://localhost:8080/demo/add .

Answer 3

define data of which type

     onClickSubmit({data}: {data}) {
       alert("Entered Fruitname : " + data.fruit);
       console.log( data);
       this.ob = this.http.post("http://localhost:8080/demo/add", data.fruit).subscribe();

     }

and backend is expecting only a string of variable name as fruit soo send only fruit variable