AngularJs form post data giving null values in my

Question

Hello all i am trying to post a form using angular but i am getting null values in my spring controller.Also in my console i see null values for the sysout.Moreover i get an error alert even though i see bull is printed on my console.

My JS Controller

angular.module('ngMailChimp', ['ngAria', 'ngMessages', 'ngAnimate'])
.controller('SignUpController', function ($scope, $http) {
    $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded; charset=utf-8";
    var ctrl = this,
        newCustomer = { firstName:'',lastName:'',email:'',streetName:'',aptName:'',cityName:'',stateName:'',countryName:'', zipName:'', userName:'',password:'' };

    var signup = function () {
        if( ctrl.signupForm.$valid) {
            ctrl.showSubmittedPrompt = true;
            var formData = {
                    'firstName' : $scope.ctrl.newCustomer.firstName,
                    'lastName' : $scope.ctrl.newCustomer.lastName,
                    'email' : $scope.ctrl.newCustomer.email,
                    'streetName' : $scope.ctrl.newCustomer.streetName,
                    'aptName' : $scope.ctrl.newCustomer.aptName,
                    'cityName' : $scope.ctrl.newCustomer.cityName,
                    'stateName' : $scope.ctrl.newCustomer.stateName,
                    'countryName' : $scope.ctrl.newCustomer.countryName,
                    'zipName' : $scope.ctrl.newCustomer.zipName,
                    'userName' : $scope.ctrl.newCustomer.userName,
                    'password' : $scope.ctrl.newCustomer.password
            };

            var response = $http.post('http://localhost:8080/Weber/user/save', JSON.stringify(formData));
            response.success(function(data, status, headers, config) {
                $scope.list.push(data);
            });
            response.error(function(data, status, headers, config) {
                alert( "Exception details: " + JSON.stringify({data: data}));
            });

        }
    };

My Spring controller

@RestController
@RequestMapping(value = "/user")
public class UserRegistrationControllerImpl implements UserRegistrationController  {

@Autowired
UserRegistrationDao userDao;

@RequestMapping(value = "/save", method = RequestMethod.POST)
public String saveUser(UserRegistration userReg) {
    System.out.println(userReg.getFirstName()+" "+userReg.getLastName());
    userDao.registerUser(userReg);
    return "success";
}

Please help me out

Thank you mark.

Answer 1

There is no mapper specified for converting JSON to Java object.

Use Jackson(dore, databind, annotations) if you want the JSON to be converted to object of UserRegistration.

Check this out: Convert nested java objects to Jackson JSON

Need to add below in dispatcher-servlet. This is for mapping the JSON to Java objects:

<beans:bean
        class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter">
        <beans:property name="messageConverters">
            <beans:list>
                <beans:ref bean="jsonMessageConverter" />
            </beans:list>
        </beans:property>
    </beans:bean>

    <!-- Configure bean to convert JSON to POJO and vice versa -->
    <beans:bean id="jsonMessageConverter"
        class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
    </beans:bean>

EDIT 1: Is the method in controller something like this?

@RequestMapping(value = "/save", method = RequestMethod.POST, headers = "Accept=application/json")
public String saveUser(@RequestBody UserRegistration userReg) {
    System.out.println(userReg.getFirstName()+" "+userReg.getLastName());
    userDao.registerUser(userReg);
    return "success";
}

Use above if you are not responding back to the webpage with a result to be consumed. If you want something to be returned from this method and displayed in the webpage or consumed elsewhere, the declaration of method would change to:

public @ResponseBody String saveUser(@RequestBody UserRegistration userReg)

EDIT 2:

    $scope.post = function() {
        $scope.data = null;
        $http({
            method : 'POST',
            url : 'save',
            params : {
            firstName : $scope.ctrl.newCustomer.firstName,
            lastName : $scope.ctrl.newCustomer.lastName,
            email : $scope.ctrl.newCustomer.email,
            streetName : $scope.ctrl.newCustomer.streetName,
            aptName : $scope.ctrl.newCustomer.aptName,
            cityName : $scope.ctrl.newCustomer.cityName,
            stateName : $scope.ctrl.newCustomer.stateName,
            countryName : $scope.ctrl.newCustomer.countryName,
            zipName : $scope.ctrl.newCustomer.zipName,
            userName : $scope.ctrl.newCustomer.userName,
            password : $scope.ctrl.newCustomer.password
            }
        }).success(function(data, status, headers, config) {
             $scope.list.push(data); 
        }).error(function(data, status, headers, config) {
            alert("Exception");
        });
    };

Answer 2

Try add @RequestBody in the method arguments:

@RequestMapping(value = "/save", method = RequestMethod.POST)
public String saveUser(@RequestBody UserRegistration userReg) {
    System.out.println(userReg.getFirstName()+" "+userReg.getLastName());
    userDao.registerUser(userReg);
    return "success";
}