CODEWITHSUNDEEP
javascriptjavaangularjsspringspring-mvc
Khobar
Khobar

Reputation: 476

Sending form from Angular JS to Spring

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":"[email protected]","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----*/
}

Upvotes: 0

Views: 1805

Answers (1)

hya
hya

Reputation: 1738

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.

Upvotes: 1

Related Questions