Angular Basics
Create Your First Reactive Form in Angular
Let's create our first form in Angular! To do this, we're going to use something called reactive forms in Angular. These forms are model-driven, which means we start with the component code and then build the HTML form. The model will then keep track of the values and the form state (like validation). It's easy to get lost in jargon with reactive forms, so let's walk through it step by step. Feel free to also refer to the docs.
Instructor: [0:00] We've got a list of habits showing up with a habit list component, but we don't have any way of adding a new habit. Let's create our very first form in Angular. To do that, we need to do a few things. First, we need to go into our app module and add something.
[0:21] Whenever you add some core functionality to your Angular app, you're typically going to need to import something into your NG module that comes from an Angular package. For us, we're going to need to import something called the Reactive Forms module.
[0:36] We're going to say important Reactive Forms module from Angular/forms. Then I'm going to add that to our imports array in our app module, so Reactive Forms module. Now we can close that and go back to our habit list. With Reactive Forms in Angular, instead of starting with the template form in the HTML, we're going to start by building a model on our component.
[1:07] First, we need to add a property to our class that will represent that model in the Reactive form. We're going to call it habit form. The next thing we need to do is use something that Reactive Forms provides us call the form building. I'm going to say private formBuilder, and that's going to be of the type formBuilder.
[1:27] Your editor will probably help you out here and let you import the form builder from Angular Forms, and that's going to appear up at the top of your file here. To create the model for our form here, we're going to use the form builder and define something called a group. A group is a group of controls for a form.
[1:47] I'm going to say this.habitForm and set that equal to this.formBuilder.group. To define the form, we pass in an object that contains the fields which will become something called a form control. I'm going to say title and set that equal to an empty string by default. Angular is smart enough to infer the type, and we can pass in default values here if we want.
[2:14] Now we have our model wired up. Let's go ahead and make our template up in our template HTML. Underneath our H2 tag, we're going to create a basic form. Inside of that form, let's create an input of type text with a placeholder that says add habit. We're going to create a basic button of type submit and say add.
[2:40] Now, we have our HTML form, but you can see we have this red squiggle telling us that something is wrong. That's because this form in the template hasn't been wired up to this form model that we've created.
[2:53] To do that, we just need to do a couple of things. A form in a reactive form expects to be bound to a form group. We can say formGroup. Remember that brackets mean input or binding, so we're going to bind this to a form group and we're going to pass in habitForm that we've already created.
[3:12] We also need to bind our text field here to the title field that we've created. For this, we can say formControlName and pass in title. Finally, we need some way of submitting this form. Currently, we have the Submit button, but it's not actually doing anything.
[3:30] To do that, we can bind to the submit event of the form using an Angular event called ngSubmit. The parentheses here around this ngSubmit indicate that it's an event or an output. Here, we can pass in a function that we define. We're going to call our function onSubmit. To pass in the value of the form, we can say habitForm.value. That's the beauty of using a model for these forms.
[3:58] Of course, we have a red squiggle here because we haven't defined this function. Let's go ahead and do that lastly. Underneath our constructor here, I'm going to create onSubmit. We're going to receive the newHabit, that's the value of the form which is just the title. First, let's create an ID for this. We'll say this.habits.length + 1. Let's say newHabit.id = id.
[4:24] Of course, I could've condensed that to one step. I'm trying to be extra explicit for you. Lastly, let's push our newHabit onto our habits array. Cool. Now, if I open up the browser and add Floss every day, hit Add, you can see that we have our new habit added here.
[4:46] This value of our title did not get reset to an empty string. That's because we do that programmatically in Angular through our component. What's really cool here is that I have access to control the form in this onSubmit. I can actually say this.habitForm.reset. When I save that and add a new habit, Floss every day, hit Add, now you can see that the title has reset to an empty string.
[5:16] That's it. Congratulations. You've just created your first reactive form in Angular.