Submit content in a form with AngularJS ng-submit and ng-model

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.