- Read Tutorial
- Watch Guide Video
In this guide we're going to start getting into how to build forms into Angular applications.
The very first thing I'm going to do is we need to import the form library. I have app module ts open right here and at the very top right below browser module I'm going to integrate our forms module where I'm going to call it. So the name for this is FormsModule and it can be found in @angular/forms.
import { FormsModule } from '@angular/forms';
And just to reference the way this works again is if you go into, I'm going close our app here, and if you go in to node modules and you look at @angular, that's where we're getting this, right here you can see the @angular directory.
Now if you open this up you can see that built into app angular is forms. And this is going to contain all of the code needed to be able to integrate forms into our application. So that's where we're importing it from. And now we have to actually import it into our list of imports. Hit save and everything will be good.
Nothing changes here yet but we don't have any errors so we're good to go on this side. The next thing, now that we have this library imported, is we have to actually go and create the form. So coming down to proposal new component here we have our text that says "Create a Proposal" and right below it we're going to have a spot where we're going to put our form. I'm going to create a div and get rid of this. (He deletes {{proposal.portfolio_url}} from proposal-new.component.html). The first thing I'm going to do is create a form tag. We need to create a name for our form and the way that we do this in Angular is with the hash symbol. Then we'll say proposalForm. This is going to be the name of our form. We can also pass in what type of form this is going to be or I should say what value this should be which is going to be of type ngForm. This is going to be an Angular form. Then we can close it out just like this, hit save.
Nothing happens here and that's totally fine. We need to actually start filling it in.
I'm going to create a form group here and some of this is going to get more filled in when we start integrating our bootstrap styles and stuff. I'm going to start off by putting that this is a form group and inside of it we can put the attributes that we want. I'm going to do something really cool here which is right below our form I'm going to place some divs and I'm going to actually put in our items. If you look at our proposal new component you can see that we have a proposal. So let's actually call this proposal. We're going to start off with the customer model. We don't have anything here so nothing's going to show up yet. But we also don't have any errors so that's fine it just means that this value's empty. Now inside of this form group, first thing I'm going to do is give a label. We don't need to give a type like this, and we don't need a name we simply need the attribute that it's going to be for. So let's get rid of this. That's kind of jumping the gun a little bit.
Here I'm going to say this is going to be a label for customer and inside of the label say customer name. That's all we need to do for our label.
And next we're going to create an input. In angular the standard convention, because one thing you're going to notice is we're going to be putting a lot of items inside of our input values, so inside of our input tag we're going to have all kinds of attributes. We're going to have the type, the ID, we're going to have if it's required or not, we're going to have our connection to the model, all of it here. So a common convention is actually split this up into multiple lines because sometimes you might have a half dozen or more attributes or different items inside of this input tag. So it makes sense to put them on lines. And because the html and the browser parsers don't care about whitespace it's fine to do it.
I'm going to type input and this is going to be of type text and I am going to not worry about the name till later. We will put that in later but now get rid of that.(He deletes name from input type). Inside of this we're going to start putting in our attribute values. First thing is going to be customer. Next one is going to be a placeholder. And this placeholder we can say is going to be ABC Company, one of my favorite companies.
Next we want this to be a required value. You simply add the attribute required, and that's all you need to do. And then we can give our name which this one is going to be customer. And lastly we're going to give the designators, so we're going to essentially give a placeholder so that Angular knows that this input item is tied to the rest of the module so this is going to be tied into the entire Angular ecosystem for this component. And so we add a hash like we added the hash for proposal form so that it would tell Angular exactly what was going on and who would tell Angular that this form is named proposal. In this one we're going to say that this input tag is named customer and we are going to connect this with the model in the same way that we connected our proposal form with ngForm customer is connected to ngModel. Now we still have an error here.
And the reason for this is because we need to actually connect and wire up ngModel. The way that we can do that is right below it I'm going to do something, this is going to seem kind of weird if you've never seen this syntax before. I know that this was kind of weird the first time that I ever saw it but the way this works is this is creating an input and an outlet in Angular.
[()]
So right here we're saying whenever you have brackets and parentheses inside of it we're telling Angular that we want this value to be able to be read in from the component. So this would be kind of the same as reading it in from the API or being able to have the value set by something else. But we also want the ability with these parentheses to have what happens inside of this input to be able to change other things. So in other words we want the ability for this value inside of here, whatever gets typed into the form to set something else on the page or to connect the API and set the value that kind of thing. What we put inside of this is ngModel. So this is saying that we're setting the ngModel and we're setting it for proposal.customer.
[(ngModel)]="proposal.customer"
And so what we have here now is a connection right to Angular and as you can see our error is gone and now this is working properly and so we're saying that this input item is going to connect to ngModel and it is going to be talking with the proposal.customers so this is mapped to the proposal customer, and as you know when we created this component we created a proposal, that's how we have access to it. When we created proposal.new we gave our view access to a proposal and since we told Angular that this is going to be of type proposal it's going to be this class then angular knows that okay this class has these customer attributes and it has a portfolio URL and tools.
The reason I'm kind of stepping back here and reviewing these is because I think it's really important to see the way that each one of these elements communicate with each other. If you disconnect one side of it the other ones are not going to work. So we have a proposal that is the blueprint for all the proposals that will be created. So this class is a blueprint for that. Our component is creating one of these proposal objects for us, and then our view is accessing it, and it is having the ability to set the values and that kind of thing.
Now if I hit save and I come over into the browser if I start typing something out, so if I say, "Jordan", notice how the page is updating automatically. This is part of what makes Angular so powerful is because of the way that this works, and it leverages all of the Node JS non-blocking IO and some things like that, we can actually update elements on the page all without having to make any changes or make any server calls or anything like that. So if our customer is Google you'll be typed in right there automatically.
This is really exciting. We have a working form. I mean we still have a lot more to do obviously, but this is all wired up properly. And the biggest thing that I wanted to intone in this guide is first how you can bring form elements in, how you can define a form, and then how you can create an input that has all of the various parameters that you need in order to make this function properly.
In the next guide we're going to start filling in our form with all of the other items and this next part is going to be kind of repetitive but it'll be good to work through because it's going to reinforce how you create form elements. And so I'll see you in the next lesson.