Add Packages and Modules

Before we move on to the form for creating events, we need to add a few new modules to our application. We also need a few new libraries to help us with this part of the application. We’ll explore these individually.

Reactive forms

When we worked through the signup and login features, we added FormsModule to each module, because we leveraged ngModel within our component templates. For our EventModule, we’ll take a slightly different approach by using the ReactiveFormsModule instead.

Reactive forms vs. template-driven forms

With used template-driven forms with HTML elements like <input> with our FormsModule and bound them to our data properties using ngModel. With reactive forms, we’ll create Angular form control objects in our component and bind them to HTML elements

The difference can be a bit hard to understand at first, but we find it useful to think about where the form begins. With template-driven forms, it all starts within the template. We’ll create our form as usual, and then begin adding directives such as [ngModel] and attributes like name to get everything working. There should be more code in our template and less in our component. In reactive forms, we’ll instead begin in the component. We’ll build our representation of the form within the component, then bind it to our template. There’s less code in our template, but more in our component.

Neither one is better or worse than the other. They each have their own strengths and weaknesses and it’s reasonable to use both within a single application. For our purposes, we want to at least demonstrate both ways of creating forms. Once we’re finished, you can decide which you prefer.

Add reactive form

Below is our updated code. Use this to make further changes: