Sending form from Angular JS to Spring

Question

I have simple application AngularJS and Spring boot. I want to pass whole form pre-filled by user to my app and register . Usually I had no problems - was passing JSON obj with correct structure and presto. However here I just run in cricle. The form payload is sent to controller, address mapping is correct , but java form content is empty

Payload sent to server:

{"userform":{"name":"a","surname":"a","email":"a@a.com","password":"a","confirmPassword":"a"}}

Here is my html:

<div class="alert alert-danger" ng-show="error">
    There was a problem registering. Please try again.
</div>
<form role="form" name="userForm" ng-submit="register()">
<div class="form-group">
    <label for="name">Name:</label>
    <input type="text" class="form-control" id="name" name="name" ng-model="formData.name"/>
</div>
<div class="form-group">
    <label for="name">Surname:</label>
    <input type="text" class="form-control" id="surname" name="surname" ng-model="formData.surname"/>
</div>
<div class="form-group">
    <label for="name">Email:</label>
    <input type="text" class="form-control" id="email" name="email" ng-model="formData.email"/>
</div>
<div class="form-group">
    <label for="password">Password:</label>
    <input type="password" class="form-control" id="password" name="password" ng-model="formData.password"/>
</div>
<div class="form-group">
    <label for="confirmpassword">Password:</label>
    <input type="password" class="form-control" id="confirmpassword" name="confirmpassword"
           ng-model="formData.confirmpassword"/>
</div>
<button type="submit" class="btn btn-primary">Submit</button>

Here java script

app.controller('register', function ($scope, $rootScope, $http) {
    $scope.formData = {};
    $scope.register = function () {
        $http.post('/api/register', {userform: $scope.formData}).then(
            function (resposne) {
                console.log("registered");
                console.log(response);
            },
            function (response) {
                console.log("Register error")
            }
        )
      }
});

And here controller:

@RestController
@RequestMapping("/api")
public class ApiController {

    @RequestMapping(value = "/register", method = RequestMethod.POST)
    public String register(@RequestBody RegisterForm userform) {
        System.out.println("name:" + userform.getName());
        System.out.println("surname:" + userform.getSurname());
        return "OK";
    }
}

and last but not least RegisterForm:

public class RegisterForm {
    private static final String NOT_BLANK_MESSAGE = "Cannot be blank";
    @NotBlank
    @Email(message = "Not email")
    private String email;

    @NotBlank(message = RegisterForm.NOT_BLANK_MESSAGE)
    private String name;

    @NotBlank(message = RegisterForm.NOT_BLANK_MESSAGE)
    private String surname;

    @NotBlank(message = RegisterForm.NOT_BLANK_MESSAGE)
    private String password;

    @NotBlank(message = RegisterForm.NOT_BLANK_MESSAGE)
    private String confirmpassword;

    /*-----GETTERS AND SETTERS HERE----*/
}

Answer 1

You need to send request like this

$http.post('/api/register', $scope.formData)

then Spring will be able to map your request to RegisterForm pojo.

In your code Spring tries to map your request to class with one field userform of RegisterForm type.