Adding hidden form field to array in Angular

Question

I am trying to add a "hidden" field to a basic form in Angular (using Firebase as the backend). I'm having trouble figuring out how to include this field as part of the array when the form is submitted. I want to include {type: 'Basic'} as part of the array. I've looked at the other related posts on this site, but am still unsure how to apply to my particular situation.

Any suggestions on how to do this?

Javascript:

myApp.controller('NewProjectCtrl', function ($location, Projects) {
var editProject = this;
editProject.type = 'Basic';  //this is the hidden field
editProject.save = function () {

    Projects.$add(editProject.project).then(function(data) {
        $location.path('/');
    });
};
});

HTML:

<form>
   <div class="control-group form-group">
     <label>Name</label>
     <input type="text" name="name" ng-model="editProject.project.name">
   </div>
   <label>Description</label>
   <textarea name="description" class="form-control" ng-model="editProject.project.description"></textarea>
   <button ng-click="editProject.save()" class="btn btn-primary">Save</button>
</form>

you cannot do that. check this post http://stackoverflow.com/questions/18446359/angularjs-does-not-send-hidden-field-value — ETS, Feb 25 '15 at 20:46
@user1200279 I'm referring to it as a hidden field, but I really just want to add an additional key/value to my array upon submission. Pretty sure I can do this with the controller, just not sure how. — Ken, Feb 25 '15 at 21:06

Betty St · Accepted Answer · 2015-02-25T22:23:29.953

You don't need a hidden form field, just submit your value in your controller like this:

editProject.save = function () {
  editProject.project.type = 'Basic';
  Projects.$add(editProject.project).then(function(data) {
    $location.path('/');
  });
};

All attributes of your editProject.project will be submitted, as you may notice in the developer console.

I would structure the controller a bit different.. here is an example (I am considering you are using angular-resource, where Projects returns a Resource?):

myApp.controller('NewProjectCtrl', function ($location, Projects) {
  $scope.project = new Projects({type: 'Basic'});

  $scope.save = function () {
    $scope.project.$save().then(function(data) {
      $location.path('/');
    });
  };
});

<form ng-submit="save()">
   <div class="control-group form-group">
     <label>Name</label>
     <input type="text" name="name" ng-model="project.name">
   </div>
   <label>Description</label>
   <textarea name="description" class="form-control" ng-model="project.description"></textarea>
   <input type="submit" value="Save" class="btn btn-primary" />
</form>

The save function will $save the new project resource (this is an default method and will make a POST on the given resource URL).

Thank you so much. I'm new to Angular; so I would certainly welcome your suggestions on how to better structure my controller. — Ken, Feb 25 '15 at 21:30
I've updated my answer with an example, but I assumed that you are using angular-resource! If not the code will look different. — Betty St, Feb 25 '15 at 22:24

Adding hidden form field to array in Angular

1 Answers1