AngularJS form inputs: how to set default values based on $scope but bind to new form model

Question

Building a CMS with node, mongoDB & angularjs. I have an edit form with inputs that I want to bind to the $scope so their values are populated with existing data. Ex:

<form ng-submit="editArticle(article._id, article)" class="edit-form">
    <label for="hed">Hed: <input type="text" name="hed" ng-model="article.hed" value="{{article.hed}}" /></label>
    <label for="dek">Dek: <input type="text" name="dek" ng-model="article.dek" placeholder="{{article.dek}}" /></label>
    <input type="submit" value="Save Changes"></input>
</form>

This appropriately fills in the input values with the current data from my mongo database. However, I would like to bind to a new form scope, so it doesn't try to pass in every value in the article scope, just the new scope within the form. (Article scope currently consists of every field in the article document in Mongo. If I pass all of this data in, I get an error about invalid schema because it is trying to pass in the __v field as well.)

So ideally I want to do this:

<form ng-submit="editArticle(article._id, form)" class="edit-form">
    <label for="hed">Hed: <input type="text" name="hed" ng-model="form.hed" value="{{article.hed}}" /></label>
    <label for="dek">Dek: <input type="text" name="dek" ng-model="form.dek" placeholder="{{article.dek}}" /></label>
    <input type="submit" value="Save Changes"></input>
</form>

So on submit, it only passes form.hed and form.dek to my database. However, now these input fields are blank because they're not bound to the original article data. The user would have to re-fill in each of the fields with the original values. Is there a way to bind to multiple models orrrr bind to a current model, but on submit only send the updated form data?

EDIT:

It looks like I have to add the ng-change attribute to each field, to populate the input fields with the original scope, then on change, set the form scope equal to the changed value. Eg.

<form ng-submit="editArticle(article._id, form)" class="edit-form">
    <label for="hed">Hed: <input type="text" name="hed" ng-change(form.article = article.hed) ng-model="article.hed" /></label>
    <label for="dek">Dek: <input type="text" name="dek" ng-change(form.dek = article.dek) ng-model="article.dek" placeholder="{{article.dek}}" /></label>
    <input type="submit" value="Save Changes"></input>
</form>

Not sure how thrilled I am about this solution, but it works. If anyone knows a more efficient way to accomplish this please let me know!

pkozlowski.opensource · Accepted Answer · 2013-02-23 17:27:33Z

1

Do a copy of the original object (or part of it) upon receiving it from DB and bind your from to it.

Coping objects before edit is a very good pattern since it allows you to easily provide additional functionality like revert edits and disable save buttons if no edit was made.

answered Feb 23, 2013 at 17:27

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

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

1 Comment

brittanystoroz Over a year ago

This makes sense, and I see it briefly described in the angular documentation, but it only shows an example of a form using a blank slate/empty object. If I already have existing data in my scope, when I make a copy of it - it is still going to copy ALL of the fields, and not just the ones the user will be updating. (Unless I specify exactly which fields to copy, which I don't want to do because there's going to be a lot of them.)

Collectives™ on Stack Overflow

AngularJS form inputs: how to set default values based on $scope but bind to new form model

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related