AngularJS - how to add to an object using forms

Question

This is my HTML:

<div ng-controller="BooksController as bookCtrl">
    <form ng-submit="bookCtrl.add()">
        <input type="text" ng-model="bookCtrl.book.name">
        <input type="text" ng-model="bookCtrl.book.rating">
        <input type="text" ng-model="bookCtrl.book.type">
        <input type="text" ng-model="bookCtrl.book.author">
        <input type="hidden" value="fa fa-keyboard-o fa-stack-1x" ng-model="bookCtrl.book.picture">
        <input type="submit" value="Add">
    </form>
</div>

and this is my JS:

.controller("BooksController", ['BooksService', function(BooksService) {
    var self = this;
    self.getBooks = function() {
      return BooksService.getBooks();
   } 
    self.add = function(book) {
        alert(book.name);
        BooksService.add(book);
    };


}])

.factory("BooksService", [function() {
    var books = {
        1: {
            name: "k",
            review: "k",
            rating: 2,
            type: "k",
            author: "k",
            picture: "fa fa-keyboard-o fa-stack-1x",
            },
        2: {
            name: "b",
            review: "b",
            rating: 4,
            type: "b",
            author: "b",
            picture: "fa fa-code fa-stack-1x",
        }
    }

    return {
        getBooks: function() {
            return books;
        },
        add: function(book) {
            books[4] = book;
        }
    };
}])

The issue here is, when I fill out the information for the form and try to add a book, the book is undefined. I tried to do

alert(book.name);

and it gave an error saying

Cannot read property 'name' of undefined.

How come it is undefined? What I want to do is take the information provided in the form and add a book to the "books" object.

you haven't passed book object in ' <form ng-submit="bookCtrl.add()">' or you can access it like 'self.book.name' in add method. — Mansi Parekh
– Mansi Parekh, Commented Aug 6, 2015 at 6:05

Pang · Accepted Answer · 2017-09-18 05:26:12Z

1

Try this:

<form ng-submit="bookCtrl.add(bookCtrl.book)">

Or this:

self.add = function() {
    alert(self.book.name);
    BooksService.add(self.book);};

edited Sep 18, 2017 at 5:26

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Aug 6, 2015 at 6:11

Mansi Parekh

5192 silver badges13 bronze badges

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

2 Comments

SilentDev Over a year ago

okay, thanks. I commented on the other replies as well but I'll ask the question here too just in case: Do you know if there is a recommended approach or are both options you provided basically the exact same?

Mansi Parekh Over a year ago

both are basically same. But if you pass argument in function (here in add function), it can be used as generic method. and you can pass any object in it. if you don't pass, it will always consider self.book

dfsq · Accepted Answer · 2015-08-06 06:08:58Z

1

You have two options here. Either use this.book controller instance:

self.add = function() {
    alert(this.book.name);
    BooksService.add(this.book);
};

or pass book object from HTML to controller method:

<form ng-submit="bookCtrl.add(bookCtrl.book)">
    <!-- ... -->
</form>

Pick what ever you prefer. I would say the first one is cleaner no need to pass anything since it's already available.

answered Aug 6, 2015 at 6:08

dfsq

193k26 gold badges244 silver badges261 bronze badges

2 Comments

SilentDev Over a year ago

okay, thanks. I commented on the other reply as well but I'll ask the question here too just in case: Is there is a recommended approach or are both options you provided basically the exact same?

dfsq Over a year ago

In your simple case they produce the same result, so it's more matter of preference.

Tjaart van der Walt · Accepted Answer · 2015-08-06 06:09:00Z

1

As the comment correctly suggests you haven't passed the book object in the ng-submit="bookCtrl.add()".

You can reference the bookCtrl.book object directly from the add function:

self.add = function() {
    alert(self.book.name);
    BooksService.add(self.book);
};

answered Aug 6, 2015 at 6:09

Tjaart van der Walt

5,1793 gold badges33 silver badges50 bronze badges

1 Comment

SilentDev Over a year ago

Right, thanks. Do you know if there is a recommended approach or are both options you provided basically the exact same? (using self.book or passing the book object in bookCtrl.add(bookCtrl.book) and doing self.add = function(book))?

potatopeelings · Accepted Answer · 2015-08-06 06:08:48Z

0

Change the form tag to

<form ng-submit="bookCtrl.add(bookCtrl.book)">

answered Aug 6, 2015 at 6:08

potatopeelings

41.2k8 gold badges97 silver badges121 bronze badges

Collectives™ on Stack Overflow

AngularJS - how to add to an object using forms

4 Answers 4

2 Comments

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related