How to send hidden field values with angularjs using ng-value

Question

Here is my form:

<form ng-submit = "submit()">
                    <input ng-model="formData.data" type="text" name="sticky_content" placeholder="protein" required="true"/>
                    <input type="hidden" name="time_start" ng-value="{{getStuff.e_time}}" required="true"/>
                    <input ng-model="formData.end" type="text" name="time_end" placeholder="{{getStuff.e_time+100}}" required="true"/>
                    <input type="hidden" name="zoom_level" ng-value="{{getStuff.zoom}}" required="true"/>
                    <input type="hidden" name="latitude" ng-value="{{getStuff.lat}}" required="true"/>
                    <input  type="hidden" name="longitude" ng-value="{{getStuff.lon}}" required="true"/>
                    <button type="submit" name="add_sticky" value="add a new stickie!">new sticky</button>   
            </form>

And this is in my controller:

app.controller('mainCtrl',function($scope,$http,sluiceStuff){

    $scope.formData={};

    $scope.formData.e_time = sluiceStuff.e_time;  //again, these are all filling correctly in the "inspect element tab. They just aren't submitting in the POST"
    $scope.formData.zoom = sluiceStuff.zoom;
    $scope.formData.lat = sluiceStuff.lat;
    $scope.formData.lon = sluiceStuff.lon;

Right now only the 1rst and 3rd inputs work - the ng-model ones. By work I mean get sent with the POST request. I know that for the other ones, the "{{getStuff.e_time}}" is filling correctly because i can see the number itself when I do inspect element. However, these other 4 inputs don't even submit, let alone submit correctly. Is this the correct format for my form and am I using ng-value correctly? I am running a node.js server, but since the request isn't even being sent with all of the data, I don't believe that there can be an issue on the server.

Edit: upon request, here is the server side code:

app.post('/api/stickies',function(req,res){
        db.run("INSERT INTO stickies (data, start, end, zoom_level, latitude, longitude) VALUES (?,?,?,?,?,?)", [ req.body.data,req.body.time_start, req.body.end, req.body.zoom_level, req.body.latitude, req.body.longitude ]);
        res.send(200);
});

and also here is the submit function:

$scope.submit = function() {

            $scope.formData.e_time = sluiceStuff.e_time;    //these 4 lines I added
            $scope.formData.zoom = sluiceStuff.zoom;        //to make it work. But I am 
            $scope.formData.lat = sluiceStuff.lat;          //not sure that they are necessary
            $scope.formData.lon = sluiceStuff.lon;           // or that this is the best way to do it
            $http.post('/node/api/stickies', $scope.formData)
                    .then(function(data){
                            $scope.stickies.push(data.config.data);
                            //console.log(data.data);

                    },function(err){console.log(err)});
    };

Solution 1

Sorry to be answering my own question so early, but I solved this. But basically I had to add all of those definitions:

$scope.formData.e_time = sluiceStuff.e_time;  
$scope.formData.zoom = sluiceStuff.zoom;
$scope.formData.lat = sluiceStuff.lat;
$scope.formData.lon = sluiceStuff.lon;

into the submit() function in my scope. I guess this makes sense, because it needs to know what those are, but I though having them in the ng-value field would save them there so that they could be accessed in the post request.

edit: ah so furthermore: ,it seems like I didn't need any of those hidden fields at all. adding to the formData object upon submit is enough to add them to the post request.

Solution 2

Do those values need to be in the form? Could you include the data in a different way, perhaps by defining a custom submit function that sends along those generated values with the data the user inputs? Seems to me like an unnecessary workaround. What does the server expect? Is it a regular HTTP POST, or is it an API call that expects a JSON object? In the latter case, it would be trivial to add extra values after the form was submitted.

It's also best practice to name your form, and then validate the data. That would look something like this:

<form name="myForm" ng-submit="myForm.$valid && submit()">

Please provide more information to make it easier for us to answer your question. As it stands, I think having those fields in hidden inputs is not necessary.

Comments

[user3727514]

I have added the server post code. Im not sure how to define a custom submit function though this sounds intriguing. Would this be a custom directive or just a different submit function in the form?

[user3727514]

I though ng-model was for two-way data binding? this is not two-way, as hidden fields are not editable? that is what I learned from this: stackoverflow.com/questions/18446359/…

[Narek Mamikonyan]

ngValue Binds the given expression to the value of input[select] or input[radio], so that when the element is selected, the ngModel of that element is set to the bound value.