AngularJS Fundamentals
Submit content in a form with AngularJS ng-submit and ng-model
We are going to learn how to create a bookmark by adding it to the bookmarks collection. We will learn how to submit the contents of a form to the controller to be processed by exploring ng-submit and ng-model.
The source for this lesson can be found here on Github. Tags correspond to the lessons.
Instructor: [00:00] Hello. I am going to show you how to create a bookmark and add it to the bookmarks collection.
[00:08] In the previous video, we saw how to toggle between the creating and editing state of the bookmarks. Now, we are going to take this placeholder here and replace it with an actual form that we can then take that contents and push it into the bookmarks collection.
[00:28] In the HTML, I am going to go up here and just paste this in. What we have is a form that is either showing or hiding depending on the value of the isCreating variable on $scope. The interesting thing about forms in AngularJS is that you can attach an ngSubmit action to the form. It's very much like ngClick, but instead of actually clicking the button, you can just hit enter and it will submit.
[01:01] In this case, we are calling in createBookmark and we are sending in a newBookmark object. This newBookmark object is further being defined on the input fields that we have. We are actually binding the property of the title input field and the URL input field to the properties of title and URL on the newBookmark object, respectively.
[01:26] Previous to AngularJS, you would have had to use something like jQuery to actually call and get the value of the text box.
[01:35] Now, using ngModel, you actually have two way data binding that will keep track of that for you. When this newBookmark object gets to create a bookmark, the properties of the form or the state of the form has already been populated onto this object, and you do not have to actually query the dom to find out what that value is.
[01:55] In the JavaScript, we are going to start to build out this functionality. I'm going to create a new section that we're going to be in for the next few videos and just call this CRUD for Create, Update and Delete. I'm going to create a method called createBookmark that takes a bookmark property. And then, from here, I am going to actually set an ID property on Bookmark.
[02:31] I am just going to, for the sake of demonstration, set the ID to the length of bookmarks. This is certainly not something that I would do in production, but for this case, I think it will at least guarantee or facilitate a semi-unique ID for the bookmark.
[02:53] From here, let's just go ahead and push the bookmark object into bookmarks. Then, what I need to do is also I need to reset the bookmark objects. I'm going to create a method here called resetCreateForm. Then, I'm actually going to define it up here.
[03:21] What this is going to do is take the newBookmark object that we saw in our form and just reset it to a pristine or default state. I'm going to set title to an empty string, URL to an empty string, and then I'm going to initialize category to $scope.currentCategory.
[03:49] What we'll also do is when we call startCreating we're going to reset the create form, as well. Therefore it always has the most recent current category. From here, we just need to make this available to the $scope object.
[04:16] Let's hope into the application here and see this in action. Create a bookmark, "One Hungry Mind." When I hit enter it should show up in this array. There we have it. It's simply taking the new bookmark properties title and URL, and then, pushing that object into the bookmarks collection, if you will.
[04:45] That is actually all that needs to be done to create a bookmark is we created a form. Using ngModel we're binding to the properties of a newBookmark object. On submit, we are sending the newBookmark object into createBookmark.
[05:06] We are pushing it into the bookmarks array and resetting the create form by overwriting the newBookmark object to an empty state or title and URL being empty strings, category being $scope.currentCategory.
[05:22] Stay tuned for the next video, where I will show you how to actually edit an existing bookmark. Thanks for hanging out with me on this video. I look forward to seeing you on the next video, where we'll actually edit a bookmark.
I also needed to modify the resetCreateForm() function. It confused me for a while, but looking at it now, it seems as though that should be correct as within the $scope.newBookmark object, category needs to be assigned the name of the current category, rather than the current category object. Does anyone else have a different understanding of this?
I had to add category to "createBookmark" function and it works for me... (angular version 1.3.13)
function createBookmark(bookmark) { bookmark.id = $scope.bookmarks.length; bookmark.category = $scope.currentCategory; $scope.bookmarks.push(bookmark); resetCreateForm(); }
I had the same issue. The example would not work for me until I used ..
category: $scope.currentCategory.name
Interesting. In Angular 1.2.1, it works exactly as described in the video.
But in Angular 1.3.8, I had to change...
category: $scope.currentCategoryto...category: $scope.currentCategory.name... in order for the newly created bookmark to appear in the view.
Hi Andy,
That is the way I understood it also. It seemed to make more sense that the "name" property of the category object be used.
Thanks for this tips! Without this suggestion I wasn't able to add a bookmar to bookmarks. I tested it with Angular 1.4.8.
As you mentioned in the video that on product you will not assign "Bookmark ID's" in following way :-
bookmark.id = $scope.bookmarks.length;
Can you please share the details what will the correct way for production???
Apart from it, I have implemented a validation check before adding any new bookmart which will ensure no blank bookmark will be added.
Here is the code :-
function createBookmarkFrm(bookmark) {
if(bookmark && bookmark.title) {
bookmark.id = $scope.bookmarks.length;
bookmark.category = $scope.selectedCat.name;
$scope.bookmarks.push(bookmark);
resetCreateForm();
} else {
alert('Error...');
}
}
Please do share your feedback....
Thanks MG
Hello!
Is there a reason why your createBookmark function has got the "bookmark" parameter when the data is available from $scope.newBookmark?
Appreciating your reply! Thanks a lot in advance!
Interesting. In Angular 1.2.1, it works exactly as described in the video.
But in Angular 1.3.8, I had to change...
category: $scope.currentCategoryto...category: $scope.currentCategory.name... in order for the newly created bookmark to appear in the view.