The Basics of Angular Forms

In any Angular project, you can implement two primary methods for creating forms: Template Driven Forms and Reactive Forms. AngularJS frequently utilized template-driven forms via the ng-model directive. However, our focus today will be on Reactive Forms, introduced in Angular 2, which we will utilize for our examples. Combining both approaches in Angular can provide a more robust solution.

First, let’s clarify the distinction between Reactive Forms and Template Driven Forms. A Reactive Form relies on a model for managing forms—typically a FormGroup or a FormControl defined within our TypeScript files. This model aids in organizing and managing forms, allowing us to respond predictably and accurately to changes in the form data over time.

Conversely, template-driven forms simply bind the form to a value, which offers limited support for grouping and validating forms.

To see how this works, you'll want to include the Forms Module and the Reactive Forms Module in your App Module's imports array. The Forms Module enables template-driven forms, while the Reactive Forms Module allows us to link our forms to the models we create. Let’s examine a basic example.

This is our simplest Reactive Form. We define a model called nameControl, which serves as a basic FormControl. We can then bind to the nameControl value in our template to display it.

What if we need to manage multiple fields? That’s easily handled using a FormGroup, which allows us to organize data effectively and model real-world forms. You’ll notice that we can access these values just as we would in a standard form.

Form Validation

Having forms is great, but what about validation? What types of validations can we implement?

First, let's explore how to perform validation. For instance, if we want to make the first name required while keeping the last name optional, we can easily set this up. This setup allows us to define the initial value of the FormControl and pass an array of Validators. In this case, we will use the required validator. In the template, we can check if the control has been interacted with and if it has any validation errors. If so, we can display an error message. Notably, libraries like Angular Material automatically manage touched states for you.

Now we can establish default values and validate for errors. What types of validation are available? Essentially, any validation you can think of! Angular provides numerous built-in validators such as required, email, min length, max length, etc. For more information on form validation, the Angular documentation is quite extensive.

Custom Form Validation

In addition to built-in validation, custom form validation is also an option. Referring back to the Angular documentation, we can implement a forbidden name validator. I've made slight modifications to return a boolean with the forbiddenName key for simplicity. This can then be applied to the last name control to restrict the use of the name "Doe." We can hook into the forbiddenName key similarly to how we utilize the required key.

Let’s see this in action.

As illustrated, the functionality successfully restricts the name we specified in the function!

Wrapping It Up

That concludes this article. While I plan to explore more about forms in future pieces, this serves as a solid introduction to form handling in Angular. I find Reactive Forms particularly appealing as they allow for model-driven control over forms, granting me greater authority over the data being collected.

If you found this article beneficial, feel free to visit my website for more articles and insights!

A comprehensive tutorial for beginners on building forms in Angular.

An introductory guide to Reactive Forms in Angular, explaining concepts and implementation.