Angular Forms – The Complete Guide 2020

Why Does Angular Need a Forms Module ?

HTML Forms seem deceivingly simple. Yet Angular Forms is one of the main core modules of the framework, and its very powerful. Why do we need a full framework module to implement something so simple as forms ? The answer is simple: forms can be some of the most complex user interfaces that a developer might have to implement.

There are simple forms of course, like for example a login and password form. But very quickly and especially in the case of dashboard development, enterprise applications, and CRUD applications we can have use cases where some very complex forms need to be implemented, spanning multiple tabs and with dialogs that edit parts of the form, all coupled with complex business logic validation rules.

Keeping track of which parts of a large form are valid and displaying to the user relevant form error messages at the right time while keeping a good user experience is a non-trivial task, that can benefit a lot from the help of a framework.

What You will Learn In This Course

In this Angular Forms tutorial you will learn how to implement both simple and complex forms in Angular, by using two different form building mechanisms: Template Driven and Reactive Forms. You will learn how to use each separately by using them to build the same form.

You will learn when to use each form type and why. You will also learn how form development can benefit tremendously from using functional reactive programming techniques, and how Angular model driven forms make that easier than ever. You will learn how the reactive forms API exposes RxJs Observables that can be leveraged to implement these functional reactive techniques.

In the end we are going to tie everything together with an exercise: we are going to build step by step a signup form which will include multi-field validation.