Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Angular 3
  • Overview
  • Transcript

4.1 The New Project Component

Now that we have user accounts added to our system, the next step is to create a form where those users can create new projects. So we're going to start off here in our app module file, and let's start by importing the the component that we're going to write. So we will import the NewProjectComponent and of course this is going to be called newProject.component. Now let's not forget to include this in our declarations here. And then finally let's add a route for this. I'm going to duplicate our projects row here, and this is going to be projects/new. And the component is going to be the new project component and because we want this route to be protected. We will leave the can activate log in guard as part of that route. Okay, so with that in place, let's go ahead and in the app directory we will create a new project component.tsfile. We'll start by importing component and OnInit from angular core, and then we'll go ahead and use the component decorator. The selector here will be a new-project and the template url will be templates/newProject.component.html. Then we'll put in our class and we'll call it NewProjectComponent and now let's add our ngOnInit function and let's talk about what responsibilities our class has. Obviously, we're going to want to have a form in this component. Now we've already made form before in our log in component, but we did something a little bit different there. You may remember that I mentioned that angular has a form component of its own and what happens is, whenever it sees a form element it attaches an ng form object to that element and uses that ngForm object to collect the values from all the inputs inside that form. However, we're gonna do something a little bit different in our new project form. Instead of allowing angular to create that ngForm object for us, we are gonna create it manually and give it a specific set of fields. Not only is this a little bit more explicit, but it will also make it easier for us to add some custom types of fields as well as some validation for our form. Now the tool whereby angular allows us to build our form is predictably enough called the form builder. So let's go ahead and import the form builder and we're also going to import the form group. In the form group is the class for the ngForm object I was talking about and both of these come from angular/forms. Now we're going to need to use both these classes here. The first one we're going to use to type a property of this class. We're going to have a property on this class named form and this is going to be a FormGroup object, which we will create using the form builder. Now, we're going to need to use dependency injection to inject the form builder. So let's create our constructor here and we will create a private property called fb: FormBuilder and that will be of type form builder, all right? And now inside ngOnInit we can assign to this .form, we can use this.fb.group to create our form group. Now a ForrmGroup object is basically just a set of inputs or a set of values that our form expects. So we're going to expect a name and it will have a default value of nothing and we will also expect a description with the default value of an empty string and this is our initial form group. We will add to this in the next couple of lessons but for now, this is what we're going to work with. Now we're also going to need a handler function which will get called when the form is submitted. And for now, let's just do console.log(this.form.value). You may remember in our log in component, we used a form groups value property to get an object with all the values of that form's inputs, and that's exactly what we're doing here. We're getting our form group object and getting its value. And so this should be an object which has both a name and a description property. Okay, that's all for now in our new project component. Let's think about templates. We're going to start by opening the projects component, and at the top here, let's include an md-toolbar. This md-toolbar is going to have our new project button which will navigate the user to the new projects form. So let's just include an anchor element in here. We'll have a rotor link. And we will bind that to the /projects/new URL and we'll also add the directed md-raised button, so that we get a button look here and then in here, we will just say New Project. Okay, now let's say even close that template and we will create our new template here newProject.component.html. So let's start by creating an md-card element, and for some extra styling of our own, we will add the class new project. Let's have an md-card title element, and we'll just say new project. And then of course, we have the md-card content. And now, we will include our form element. Now once again, I'll refer to our log in component lesson, where you remember we said that, when angular sees a form element, it automatically creates a ngForm or a form group to attach to this form. However, since we've already created form group object, we want to use ours instead of the native one. So what we have to do is bind our object to the form group property of this form element. So we will bind using square brackets to the form group property and what did we call our form group? We called it form. So, we will just pass form in here to our form group and then we also have to bind ourselves to the event coming out of this form group. So, we will use parenthesis to bind to the ngSubmit event. And when this happens, we will just call our own handler function. All right, so now let's fill in our form with a couple of elements. Let me create a paragraph here and in here we will put an md-input element, this will be of type text, it will have a placeholder of name and we need to tell this element, which form control inside of our form group? We are binding two. Now I don't think I mentioned the term form control yet, but if we look back on our component class here where we created the form group, the name and description properties here are basically form controls inside of our form group. So what we need to do is connect one of those form controls to this input element and so on the md input element. We will bind it to its own form control property and we will give that propert, value, form.controls and then we will use square brackets index which is kind of the convention with an angular when referencing specific form controls. And that is the control's name object, so inside of our form, we have controls and we're getting the name control. We need one more for our description. So I will create another paragraph here and inside. We will use the textarea and material design does not yet have a working text area element so we can't use that. We'll give this the placeholder='Description' and we will bind to its [formControl] as well, and we will give it a reference to form.controls["description"]. All right. One more element at the bottom here and this is our button, we'll have to give it a type of submit, so that the entry submit event will be fired. And we can't forget to make it look like a button so will say md-raised button and will give it the primary color for our color scheme and I think our form should be working now. So, let's head over to the browser and see what we've got. If we come back to the project's page you can see that we have our new project button up here in the toolbar that we added. Let's go ahead and click that. And you can see we are taking to our new project form, that's great. If I add a name for my project and I added description and I click Save, you can see that our handler function was called and we get an object with a description property and a name property. That's excellent. And if I go ahead and change this and save it, you can see that that gets updated. Okay, so we have the very beginnings of a working new project form. So that's great. In the next lesson, we're going to talk about validation.

Back to the top