AngularJS not sending hidden input value

Question

I'm trying to get data from my form in AngularJS, this all works fine except for the field I did not type anything in. I changed the field from hidden to text, but both do not work, however if you inspect element you can see the correct value in it. Here's my HTML:

 <div ng-controller="postMessageCtrl as Ctrl">
    <form ng-submit="processMessage()">
        <div class="form-group">
            <input type="message" class="form-control" placeholder="Message" ng-model="formData.message">


            a{{data.receiver.id}}a
            <input type="hidden" class="form-control" ng-model="formData.receiver" ng-value="data.receiver.id" />
        </div>
        <button type="submit" class="btn btn-primary btnq-lg btn-block">Verzenden</button>
    </form>
</div>

And here's my controller:

app.controller('postMessageCtrl', function ($scope, $http, $state, localStorageService) {

    $scope.formData = {};
    //$scope.formData = localStorageService.get('userKey');

    $scope.formData = {
        key: localStorageService.get('userKey'),
        message: '',
        receiver: ''
    };

    console.log($scope.formData);
});

The key and message are filled correctly, but the receiver id is not. any suggestions?

Answer 1

From the answer AngularJS does not send hidden field value:

You cannot use double binding with hidden field. The solution is to use brackets:

<input type="hidden" name="someData" value="{{data}}" /> {{data}}

See this thread on GitHub: https://github.com/angular/angular.js/pull/2574

Since Angular 1.2, you can use ng-value directive to bind an expression to the value attribute of input. This directive should be used with input radio or checkbox but works well with hidden input.

Here is the solution using ng-value:

<input type="hidden" name="someData" ng-value="data" />

Update:

Another solution could be to directly set the value in $scope.formData rather using the hidden input field when you are initializing it:

$scope.formData = {};
//$scope.formData = localStorageService.get('userKey');

$scope.formData = {
    key: localStorageService.get('userKey'),
    message: '',
    receiver: ''
};

$scope.formData.receiver = $scope.data.receiver.id  // Set the value directly in your `formData` since you are using Angular;
console.log($scope.formData);

Answer 2

The simple solution is to use ngInit directive:

<input type="hidden" class="form-control" 
    ng-model="formData.receiver" 
    ng-init="formData.receiver = data.receiver.id" />

Answer 3

Avoid submit complexion by just handling things with a function call on a button click, like on this Plunk.

Html:

<div ng-controller="postMessageCtrl as Ctrl">
  <form>
      <div class="form-group">
          <input type="message" class="form-control" placeholder="Message" ng-model="messageInput">
          <button ng-click="Add()">Add</button>
          <p></p>
          <button type="submit" class="btn btn-primary btnq-lg btn-block" ng-click="Send()">Send</button>
      </div>
      <p></p>
      <b>Messages</b>
      <ul>
        <li ng-repeat="message in formData.messages">{{message}}</li>
      </ul>
  </form>
</div>

AngularJS Controller:

app.controller("postMessageCtrl", [
      "$scope",
      "$http",
      function($scope, $http){
        var self = {};

        $scope.messageInput = '';

        $scope.formData = {
            key: 'someUserKey',
            messages: [],
            receiver: null
        };

        $scope.Add = function(){
          console.log($scope.messageInput);
          if($scope.messageInput.length > 0) {
            $scope.formData.messages.push($scope.messageInput);
          }
        };

        $scope.Send = function() {
          console.log($scope.formData);

          $http.post("/somehost/action/", $scope.Person).success(function(data, status) {
            $scope.hello = data;
          });
        };
}]);

The sample will have a 400 bad request error in console, because the url used is obviously not going to work, but the principle is correct.

This way you don't even need to add hidden fields, because they aren't needed (you always have their value from $scope.Person).

Conclusion:

There are 2 things that didn't make sense from your original question:

a{{data.receiver.id}}a

You should use formData here, data isn't defined.

JSON is incorrect

Receiver doesn't contain id, given your sample code, it should be defined like so:

$scope.formData = {
        key: localStorageService.get('userKey'),
        message: '',
        receiver: {
          id: 1,
          name: 'SomeReceiver'
        }
    };

So if your receiver is set like this:

$scope.formData.receiver = $scope.formData.messages[0].receiver;

You will need to implement some way of providing that receiver through messages[0];

You'll notice that the receiver becomes an Object in the console log.