2.6 Task Editing Form
In this lesson you'll create a task editing form, allowing you to see Angular's automatic data binding in action and preparing for the implementation of task and tag updating.
1.Introduction2 lessons, 05:03
2.Creating Your Controller10 lessons, 1:02:17
3.Conclusion1 lesson, 01:30
2.6 Task Editing Form
Hi, welcome back to Create a Foundation for Apps Controller using Angular JS. In this lesson, we're gonna set up an editing form for each task inside our UI. And we're gonna take advantage of Angular's two-way binding to allow for real time editing of the information inside each task. Now I've got the essential HTML for the form in place here already. So inside the card section that's holding our task, we've just set up a form that has an input field that matches each one of the task's fields. So we have one for our title, one for our description, one for our tags, and then we have a button down below here that's gonna update that task. And that gives us this editing form here. And now what we're gonna do is add in a little bit of extra code that's going to automatically populate each of these fields here with the title, description, and tags for this task. And once that's done, whenever somebody edits the form down here it will also change the information up here in real time. And then when we hand this app over to the UI developer, they can add in a little toggle switch that will show this part of the task by default. And then when they toggle into editing mode for the task, it'll show this part. But for now, all we need to do is get that two-way data binding working, and we need to make this Update button work. All right, so the way to make the two-way data binding work is fairly straightforward. What we need to do is use ng-model on each one of our input fields here. So let's begin by setting up the two-way data binding on our title. So in the input field here, we're gonna add ng-model = and then we just need to copy this, task.title, down into our ng-model here. Now let's save that and have a look at the results. Okay, so now you can see that this input field at the top of our task editing form automatically shows the task title. And now if we edit the task title, you'll see the title up above, in the display area, is changing along with it in real time. All right, so let's go back and add the rest of our two-way data binding. So add ng-model to our description and this time we'll set it to be task.body. And then we'll do the same thing for our tags, heading ng-model=task.tags. All right, now let's have a look at what we have in our UI. Cool, so all three of our fields are now showing the correct information and each one has that real time editing. But you remember that in an earlier video, in order to turn our comma separated list of tags into a proper set of distinct tags, we had to do some processing. But right now we're not doing any processing like that in our editing form. So if we're to edit out tags now, watch what happens. Obviously that is not what we want. So that means that we're gonna have to add in a function to take care of processing the tags whenever somebody edits a task through our task editing form. And the way we're gonna do that is by using ng-change. ng-change will fire off whenever anybody makes any change to anything in this input field. And we're gonna use that to run and update tags function. So that will make sure that our tags are probably processed before we come to actually updating the task itself. So we'll add in ng-change= and we'll have it called the function UpdateTags. And we're gonna pass the task.id as an argument, so that when this function's fired off, we know which task it is that needs to have its tags updated. So then the last thing that we need to do in the UI is have the Update button fire off a function that will take the task data that has been edited through this form, and then process it into local storage. So to our button we are gonna add ng-click=, and we'll have a fire of the function UpdateTasks. So right now, neither the UpdateTags nor the UpdateTasks function exist in our controller. So we're gonna have to go ahead and create those. In the next lesson, we're going to first create the UpdateTags function. And that's gonna make sure that whenever anybody starts editing their tags in the task editing form, they'll immediately see them processed properly into distinct tags. And it will make sure that the tag information is correct before the task is actually updated. I'll see you in the next lesson.