 Okay, so we're going to create a template-driven form for your assignment. I'm going to go over here a little bit to show you the assignment. Okay, so you're going to create two types of forms. The first type is the template-driven, and this form here is going to be used to add your form. So you could add fly component, which we added already, and that fly component. You're going to create a web form, and you're going to use the template-driven form format. So in our data, as you recall, in the flight data, we have this JSON data, right, or this object type. We have, you know, eight fields, two, three, four, yeah, eight fields, and you would have to create a form that would accommodate all these eight fields, and you can process them. And I put here more information about what requirements you should put in your form. So the field names here, it is, again, only my recommendations, you can change them anything you want, it doesn't matter, but you can keep it as is. And then the type of data, they are stored, right, of course you'd have to force it to be that way, but you can. And then the minimum and maximum are characters, okay? So it would be kind of similar to what I showed you. You can set that in the input tag, and then no duplicates, okay, so we should no duplicates. So in this example as well, because we're not storing data in a database, we can check for duplicates. For this class, however, I'm not going to, you know, hold you accountable for this, okay? I mean, ideally, it should be unique, okay? So if you know how to check, make sure there's no duplicates, do so. If you don't know how to do it, if you don't have time to do it, don't worry about too much about it, okay? That's not too critical. So the flight number here, it's a miracle, it's ideal, an airline, characters only, and then so on. So these are the requirements you need to put inside your form controls. And then basically here, you're going to create a template-driven form, and then you're going to let a user have a unique ID, or you can randomly generate one. That's fine. Maybe this is a better way. And then in the trip type, in the trip type here, you're going to add three types. It's either a one-way round trip or multiple destination. So you can use a drop-down, or you can do a selection list, right? For radio buttons, how are we going to do it? That's fine. Because only one will be selected. And then you're going to create a function to handle the form submission. So it's commonly known to create a function called handleSubmit. It's not part of Angular. It's just a function you create, but handleSubmit will make sense. And then you pass to that function the entire form that you would then validate these forms as required. So make sure these are required. And I'll show you, using Angular's validation system, it's really easy to do. Maybe not easy, but once you understand the logic, then it's easy. And then we're just going to test that. So this is the add form. This is the actual data. We have to flight data. Have all these fields ready. And this data here is just a file and the application. So we're not going to physically delete or change this data. We could if you want to, but you can't because it's the front end. Front end, you cannot change its content. So what we did was we basically create a variable, an object only. So once you run the program, all these data are not permanent. They are stored in RAM only. So you're able to delete and things like that. And the RAM, once you stop the program and you run it again, everything is returned. If you remember the book, example, again, AJET, you're able to delete data. And once all the data are gone, they're not permanently be gone. You will have to restart the application again and everything is returned. Okay. So what we do so far is just loading data to a variable in RAM object. And this object will exist in the application as long as your app is running. And then towards the end of the course, the last week when we do the dependency injection, we're going to connect to a back end where we'll be adding and deleting data and a live database server. So at that time, the data are no longer part of the local object here. It's actual data from a live database system. And then those will be permanent. You can delete, update and so on directly in that database. And you will use that by using services and the Angular dependency injection system. But once you understand how this works locally here, then switching over to the database server side is not that different. Okay. All right. So here in the app light, all right. So app light here is this, we're going to add the form. And I don't know if I add, if I have, did I provide any additional, no. Okay. Well, so, okay. So the flight, I'm going to just delete this. So create a form and using the Angular template-driven form. When I do that first, the add will be the template-driven and then the edit will be the reactive. Okay. So if you want to follow your CSS and your rules, make sure you have the same structures. It looks kind of nice. So if you go to like the flight list, okay, the structure here. No, not the flight list. We added to our route. Where's the route? Right here. Okay. So we have the class content main assets. What happened? It looks like assets to vendor. Okay. If you look in here, yeah, I'm going to give you a setup. Like some of these tags here to make it look kind of nice already for you. So you don't have to do that yourself and you just have to fill out the form. And I will make that available. And I've added two blackboards. You can just copy that template and use it. And your job is basically to create each of those elements. But the control will be added for you, okay? So I may get available later either today or tomorrow. So it looks nice. Okay. Well, for now, we're going to look at the form control here. So you create your form just like this. You write a little form like that. Okay. And then inside that form, you're going to give it a name. This form must have a name. And if you remember template-driven forms, you can have the name of the form using the pound sign followed by a name. And I will call it the flight data form or whatever it is. And you're going to bind this to a directive called in the form. Okay. So this one tells Angular that, okay, this form here is called, has a unique name called flight data form. And is now can be managed by Angular form. You can access the content here, not directly, but from the source. If you pass data to the Angular, it knows where to find the source. The reason why you give it a name is because if you remember on the web page, you could have many forms, right? A and B and C, of course. You can have all those different forms. If you don't give it a unique name, Angular does not know where to get the state out, right? So just make sure you give it a unique name. And then usually then when you submit the form, you go into, you know, process the form either through a submission form or if you bind the data, okay, if you do a data binding, then you don't have to, right? Two options. So usually you do like a and you submit and then you bind that to a function, I call it handle, right, handle submit. You pass in this flight data here without the pound sign. So now on the form, you hit the submit button, it's going to load everything to this variable called flight data form. And you can access those data, do this object, flight data form, dot, whatever it is, whatever it is, right, a name of that form. And let's say that I'm going to just do a very simple one here. Input, I put here like a label for, we'll give it an ID. Just put here first name, okay, first name. And you put here first name, right? And then in here you put your input, ID is first name. You give it a name as well. You usually eat the same name. The name fields need to be accessed in the form, the form. So we form this is one data form dot first name, right? You access that way so you get the value from there. And then that would be the first name, right? And down here I put a div and I put here the button type. So you can put submit here, type will be button, I mean submit. And then you put here, actually I'm going to do the angular, use the boost trap, button type will be button. And then the class will be BTNs of button. I want it to be a medium, medium size. And I want the color to be primary, so blue, right? You add those classes there and then you put the submit here. So something like that, right? And let's see what it looks like when I save this form. Save it in my application. I go to the flight, app flight. So here's the form, and though it's not nice, I should remove this later in the chat component. But you can see that as the form here, the button is already, you know, styled by boost trap. I did not style these using boost trap. If I could, if you style using boost trap, then you can add this as a form control, and it will make it look kind of nice, actually. But you can see that if I click submit, okay, it's going to load that in the backend, although we don't see it. I see if there's any errors in this control here. As you can see, no errors. It's going to load that to the backend and then you get the data, but then it has some error because we did not add any of the template to it yet. Okay, so one thing it would do before we go break is when you create forms, you have to go to the add module and import to really important class or module called forms module. You need that in order to work, okay? So your form modules will be in here. So I want to go in then create, I'm going to see, show you here. Okay, so right here, it's kind of small, but you need this two born here. Okay, so the forms module, you need that sort of template driven. And then when you do the reactive forms, you must also import the reactive forms module to your main module. Okay, so since we're going to use it anyway, you can do both all at once. So your root module here, make sure you put that in there first, otherwise it won't work. And you saw the error down here. It says error curve because there's no in the model scheme. It does not understand those. Okay, I think I missed the label here. So in the add module, you're going to go to the import module part here and I did the forms module already. I need to also import the reactive forms module. Okay, so both of these need to be included in the add module and they should be a part of that up here. In order for the forms to work, in order for the ng thing to work. We did this last time, last time, because we were doing the data binding, two way binding. Two way binding needs to form a module, so it's there already. So yeah, we need that. And then I think in my flight list, I mistyped my label. It used to be correct. Angular is kind of picky here and the HTML doesn't care for Angular does care. So yes, I don't have the function. Yes, I'm going to create this function inside the source and let me close all these, it's confusing now. Go to my flight component. I need a function here called a handle submit. And I put here form data as I do here. You can just call it whatever you want. Maybe F for form and then our console log, F, so you can see in the console, okay? What it looks like when I submit the button. So when I click the button here, when I click the submit, it's going to load this form, the handle submit form. I pass the form data to it. In this case, we don't have one field. Just this field, so you can see only one object, okay? So let's see if this works. So you go to put here, you know, okay, it did, I probably have an error in this, though. Yeah, it has some error. All right, yeah, we'll fix it when we come back from the breaks, let's take a break first. We'll come back and then we'll continue with this form here, okay? And I'll also, I'll see if I can get a copy of that layout for you. So see you back in 10 minutes, say 11.35, okay? All right, so I added a link to the site where you can download the code. So if you go to the blackboard, if you remember, if you go to the resources folder, I'll probably add a link here later too, but for now, let me source the folder. And if you remember, if you go to the nclass demos, all the demo files are found here. Inside here, you're gonna see a file called forms, or a folder called forms, you go in here, then you will see this template here, okay? So if I open that, see what it looks like. Okay, so you can copy this and use this in your form. All right, so I'm gonna copy this and paste that to my form. And I wanna see what that looks like, okay? So in here, yeah, I'm gonna redo everything here. So let me, that has a nice CSS style rule already. And in this case, I'm submitting the form to the event down here instead of in the submit form up here, okay? So I did a little bit different, but either way will work. But in this case, I'm gonna submit through the button and the button's gonna call a function handle submit, which we have, I'm gonna pass the event to the event here is the same as if I go to the flight data from up here, same idea. So we are gonna access to all the form elements through that event. And then it's a, you can see it's a button, it's a blue. She'll say icon and then it's large. And then each of these is a row, okay? One is a row, a row could contain multiple columns. So you could put like three or four different columns in there to have your fields. So for example, this could be my one field, right? This is the second field and third field and so on. So if it max out that column, then you copy this and move to the next row and then row two and three and so on. So if I format this looks a bit nicer, okay? You'll see that this is the input field and I wanna see what looks like in the browser first, okay? So let's save this and load on the browser and see what it looks like. So here is a little bit nicer, as you can see. I added the information already here as well. If I add the submit button here, closing with submit it, it's gonna load the function I create and it should put something in the console. I don't think nothing yet to put in yet. It just says mouse event. It prints the mouse event here because there's nothing passed to it. Okay, so I'm gonna remove this part here and so we can start building this form and we'll just do one or two fields so you can see how data are worked and passed to the source. So in the root component, add component, I'm gonna hide my child component and also hide this part down here. So none of these would be visible. Just the outlet here. So back to square one, right? Where do I go to only shows that content? Okay. So here is the flight add and then I'm going to add the fields. So back to the flight here, I'm gonna add one field here and the field we're gonna add here is the input field for the ID, right? So you have an ID, give it a name. Let's say the flight ID, right? And then the name will also be called ID. Now there are lots of ways to do this. You can do it if you do a data binding and if you remember if you did a binding, you don't have to, you don't even need to submit the form. I mean, you'll submit it of course, but your data will automatically bind to a local variable in the program in the source, right? So if you do that way, then you don't need to do much because the data already passed to that easy variable. The submit button will only submit it so you can validate your data. So let's see, I wanna show something here and I'm gonna just, I can't remember all these stuff. So let's say we have the ID field, the name is gonna be called ID as well and we're going to use a type. So you can say the type has to be of type number, right? Only numbers can be used in this field. You can set the minimum and maximum if you want, right? So for example, you cannot have negative numbers, right? So you can say minimum is gotta be what, right? The maximum be anything you want and I guess this matter, also you could say a thousand, 10,000 doesn't matter. That's the maximum ID you can use for this field. If you notice, I put all these here because these are HTML attributes, right? The type and then all these are HTML attributes, they're not Angular because I'm not binding to these attributes either, these are traditional HTML stuff. And then I want to also make this as required, right? As you can see, you can do all those stuff here. And I see what else do we need? Yeah, I think that's all we need for that one, right? Just simple like that. So if I ended it here and we'll see what that looks like in the form. And so if I load my form here, see input, here it is. If I type characters, it won't let me because I control, let CSS, I mean, let the DOM control it as we numbers. I cannot go negative numbers either. It should not let me do that. But it's not going to be valid. When you validate this, it's not going to work, okay? So if I go to a number that is larger than a thousand, it should also not let me do that, but that's the value. It's not the length though. If you want to control the length of the characters, then you have to say, you know, a minimal length, right? Or max length, number of characters. But the value is the actual value itself. And so, and then what happens when we submit the form? Okay, if I put like five, submit the form, it loads the submit. And if I press F12, you will see it loads the submit here. It goes and shows the mouse event only. Right, I'm not getting the actual data. Has the mouse event because why is it shown here? Well, because in our code, we load the event, I pass an event and then this function here handles it and the source code as the function and the event as, I get that and load that here. As you can see, it's loaded the event, which in this case will be a click event. And so there are different ways to do this. And I wanted to use the other one and see, I want to use a submit one. Let me see if I can get that for you. Let's see this one here will work. No, not that one. Just give me a second here. Yeah, I think it's all messed up here. Okay, well, let's go back here first. I'll probably go in a little bit too fast. Let's go back to the unit for, I want to look at the notes here, right here. No, not this one, angular. Let's look at the form first, okay? And look at the prepare and the template driven forms here. This is, again, this is a note on the angular site. I just put a PDF, you can see it, but you can also get it from the angular site. I'm going to go right down to the example down here. Make it a little bit faster down here. Okay, your data component, right? So here we go, get in there. Okay, so here is the form, a very simple one, right? The input here, this is the classic way to do it. And you get a name and you can also add a class for control, so it's a form control part of the angular CSS. I want to use something a little bit more different. Okay, so right here, this part here is how you actually bind data, right? Remember we did the data binding. This is a two-way data binding. You can bind to a variable and the source code. And so you make changes to this field that automatically adds to that field, okay? It just loads the data, right? So instead of going and grabbing every field manually from the form, you would just bind that to actually to an object and all the data is there. Now what I'm gonna say here is like, if you remember in the traditional JavaScript, if I go here, if I put it down here, okay? Just to show you the traditional way. You have a form, right? You have an input ID, or you give it name is first. You have another one like that, right? First, last, email and so on. Now, when you submit this form though, it's gonna go to the script and inside the script, it looks like something like this. You can say, you give it a name here. The name will be, you know, F1. And you can say here, right? Form is equal to documents that forms called F1, right? That's the form. And then I wanna get the first name. You would say F.first.value, right? You get the value from that first, right? The first field. And then F will be, again, last.value and so on. So you grab each of these through the form object so you can get the data, right? Then when you submit the form, you're gonna find this form here and grab each of these fields directly added to the variable and you can set it to here like, you know, first name. I think here will be last name and so on, right? Okay, and then you build the form and you submit it. So instead of doing this way, you combine each of these fields directly to the first name, last name field so that you don't need to go through the F1 or through the F at all, right? Then when you submit, you just basically validate these, make sure they're all correct and then you submit the form and you make the changes to the actual source, okay? So that's what I mean by binding data. So what I mean, so in that case up here, we can say, okay, this is ID field. I'm gonna bind this to the ID field using this, if you remember this in the model, this is a two-way binding, bind it to a variable call maybe flight.id, okay? I have a flight, this is a new flight information, has ID field, bind that directly to that field. So when I make changes, that data has it. So in the source code, you're going to have a variable in here somewhere, in here, you can have a variable call flight and this is gonna be an object, okay? An object of information, right? And so you're gonna have here the ID field flight of ID, has an ID field, yeah, it's an ID field and this will be mapped directly to your data. I mean, my data here, looks just like this. So if I copy this, right? And I put it right here, it looks something like that. This is a single flight and so I'm gonna map that field to the flight ID, flight airline, flight flight number and so on so that one of my changes is going to go in here. So initially, there's nothing here yet. So you can put here nothing, you put no if you want, empty. All these will be just empty fields but I have my data here pre-created for you, for me, right? So all these will be available but then no content, okay? So here's the flight and then I'm going to bind the flight data, which I did already, I bind this field to the flight.id and it's gonna change this flight ID here, whatever changes I made and then I do another one for the airline, flight number and so on. So if I were to go over here and add two more fields like this two here, it goes from here and then here. This will be the airline. I'll give it all the same name so that they are things. So type will be just text and whatever the minimum requirement is, it'll only be, let's just say that minimum, you can say whatever you want. What do I say in the sheet is required and if it binds to the flight airline and here would be the flight number. Number and it'll be text minimum, you wanna have at least three characters and max would be, let's just say, six, I don't know. And you bind that. Okay, so I wanna submit this button. This event here is not gonna create this data here because I'm not passing this form data. If I pass a form data to it, yeah, it's gonna grab all of these as well. So instead of saying event, I could pass a form data here and let me do that here now. Let me just go here and pass in the form data to that fields and see what that may look like. And also I'm gonna save this as in case and we'll see if this works over here now. All right, so I'm gonna reload this form, okay. And here are my three fields. Of course, not that nice yet, but if I click submit, okay, you see some, you see that it loads here now on the left side before it was a mouse event because now I'm passing the form data, I can actually get the actual content here. Well, let me do it again. Put some stuff in here. I put here 23, flight airline would be let's say United and then here is UA123, okay. Let's submit. Okay, so it goes to the form, a console log that you can see here and if you drill this down, you're gonna see the actual content in this form here. So the form, okay, it says valid. We'll talk about this later, we'll do validations. The value here, just a value field that has my information, okay. So again, the form control is the form data. If I get dot value, I'm gonna get all these value here because it has a lot of information here. You don't want to get all of these here unless you want to, but I'm interested only in the value. So here gives me those three fields because I only have three fields, okay. So in my source code, when I submit the form, I get the F here, because F is the entire form, I log the F, that's why I got everything. If I just want the value, then I put here F dot value, okay. If I do it again now, okay, here we go. I put here, three, four, five, united, and then UA one, two, three again, okay. Now you see that I'll drill down and I just want to value return, omit the rest. So I got my ID, I got my flight year line, it gets the order line point here, it doesn't matter. And I got my information I want, all right. So now I get the data because I pass everything to that one object. And so you can see that now we can get the flight name, flight number, ID and so on. And so what you do is if you do it this way, if you're not binding data, since I'm binding the data already, I'm gonna get both, okay. So for example, if I go and also output the flight, remember it'll be this flight. This data is bound to a binding ID, the airline and flight number. These will be empty, but these three fields should have the same data, all right. So we go again, put here, five, five, united, and UA. So as you can see here it is, the first one is from the form, okay. Only show three fields because only have three fields. The second is the entire flight object. Okay, you can see all the fields are here, only the ones that were updated because only have those three fields and I updated the flight airline, the flight number and the ID. The rest will be obtained remain as empty, okay. So I have a direct data binding here. If that's the case, I don't really care about the second part, right. The second part, it doesn't matter because I'm still gonna get the data anyway, okay. So what I mean is like here, when I do this, I don't need to pass in the data at all. I don't want, I don't need to. It could be something else because it doesn't matter because once I hit the submit button, I'm gonna get those data. I could put here just some stuff. Back to the event, right? The event, it'll be like mouse event stuff. So now, because it's an event, this is no longer valid. I don't need that. I just wanna show the flight data. So you will see that it actually, the data actually comes through and my submit button only shows the output here. That's all it's doing. So again, five, six, United and so here it is, right. The ID, the actual flight data is now altered or updated because these are bound using two-way data binding. So once I get this new data, if it's all filled in the way I like, then I'm gonna push this new data to my original flight list, okay. So if I wanna see my actual flight list, I would do this as well. So I can say, I'm gonna have a, all the flights plural is gonna be from my flight list physical flight data, yeah, flight data. Yeah, from the flight data list, right? So it'll be this guy here. This one has all the flight data and I'm gonna print the all flights to the information to the console as well. So you can see this is all the flights. This is the original one. This is the new flight. So you can see that now if I refresh my page, I show these numbers, United and you pay one, two, three. Okay, so here it is. This is just this form, the new flight. This is the existing flight, I have 10 of those. You can see everything is here. So now if I want to push this new flight to that list, I'm adding a new flight, I just push it to the array and I'm done, okay. So when you value your form, everything looks good here. All right, I like the way it is. And then when I submit it, I'm going to push it to the flight. So here, I will show the before and then I'll show here the after. So with this flight, that push, I'm gonna push the new flight to that list. And then I'll console log this again. So you can see that new flight has now added, has been added to the original list. Okay, so here we go. I put here by six, United Express. And then before you E, one, two, three. So now you see, this is the new flight. This is the original flight. We added to the flight to it. You can see that now it has added flight number one, two, three, I mean, flight E number three, four, five, six. And if we show here, of course, some of these fields are empty because I did not validate them. So you can have empty fields when you validate. So that's how you add data to your original flight. And because we did that instant RAM, it's live, right? I go back to my flight, you're gonna see it's been added to the list as well. And this is only in a RAM, by the way. So because it's only in a RAM, of course, if I refresh my app, I think it's gonna be gone before we start my app. So you have two options here. When you summon your form, either you pass in all the entire form object to it, and you don't have to bind this data. If you don't bind it, then you have to submit the form and then grab it from here. If you do a data binding, and there's no need to do that here. It's redundant, right? You don't need to do it. So since I left you, ideally, you would bind it. Bind it so your data is live, and then you have to validate it. So the question is that how do you validate a data binding facility bound to that field? But if I do it this way, right? Once I get the data, I can go through every field and check if they meet the requirement. If it's not, I can spit out some errors or do not push it to the new list, to the original list. But if you do a data binding this way, then you must have a different way to validate this before you submit the form or before it adds it. That's the Angular built and validated. We're gonna do that next time. All right, so this is how you will build this form here. First, create a flight model here, okay? Just a template that has all the fields that you need for that. Again, just copy from the original flight data and empty that list. And then bind that to every field you have. And this function here is needed because the only time I submit the form is not I'm gonna get the data. I'm going to push that new flight to the original list. That's all I'm doing here, okay? Because I found everything here. And then you have to import that flight list, the flight date, original flight to this component so you can alter that data, okay? I did here is, I actually created a local variable here like this. You don't have to, right? You could access directly to flight data. I could go here and just say, you know, flight data, that push, and that's fine because I'm not reusing this in the class here because this is just the actual class variable that points directly to this actual flight object. So if I'm not reusing inside in my class here just for the purpose of, you know, pushing data to that list or deleting data in that list and I don't really need to be declared inside here. There's no need to because I can access directly here. Yeah, it should work. And so if you do that though, you cannot use the word this. It'll be just the regular flight data object. And this is not part of the class. It does not belong in the class here. As you can see, it's not even property here. It's just a direct reference to the original data. But certainly, yes, you can access it absolutely. And you can see, if I go back to the ad and do, you know, six, eight and I express two and six. Okay, we add that here and go back to the flights. You see that it's been added down here as well. Okay, and notice the original is gone because we reload the page. So if I go back and add again, add new one, put your two, four, five, six, you put it back to United, one, two, three, add it. Again, notice my page does not refresh. Okay, that's why I say it's important to make sure your page don't reload. If it loads, then your data will not be retained. So you can see if we go to the bottom and there it is. Okay, I retain the data because I did not refresh it. If I refresh my page, you see, it's all gone. It's temporary, it's only in RAM. That's why it's important to make sure your pages don't reload. If we load, it's not gonna work. You're not gonna retain the data because once we reload it, data are gone.