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 stackoverflow.com/questions/18446359/… — ETS
– ETS, Commented Feb 25, 2015 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
– Ken, Commented Feb 25, 2015 at 21:06

Betty St · Accepted Answer · 2015-02-25 22:23:29Z

1

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).

edited Feb 25, 2015 at 22:23

answered Feb 25, 2015 at 21:11

Betty St

2,91024 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ken Over a year ago

Thank you so much. I'm new to Angular; so I would certainly welcome your suggestions on how to better structure my controller.

Betty St Over a year ago

I've updated my answer with an example, but I assumed that you are using angular-resource! If not the code will look different.

Collectives™ on Stack Overflow

Adding hidden form field to array in Angular

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related