In this post, we will see how the Angular Forms API works and how it can be used to build complex forms. We will go through the following topics:
A large category of frontend applications are very form-intensive, especially in the case of enterprise development. Many of these applications are basically just huge forms, spanning multiple tabs and dialogs and with non-trivial validation business logic.
Every form-intensive application has to provide answers for the following problems:
[…]
Angular 1 tackles forms via the famous ng-model directive (read more about it in this post).
The instantaneous two-way data binding of ng-model in Angular 1 is really a life-saver as it allows to transparently keep in sync a form with a view model.
[…]
Angular now provides an identical mechanism named also ngModel, that allow us to build what is now called Template-Driven forms.
[…]
Unlike the case of AngularJs, ngModel and other form-related directives are not available by default, we need to explicitly import them in our application module:
We can see here that we have enabled Template Driven Forms by adding FormsModule to our application, and bootstrapped the application dynamically.
This is OK for development mode, but you might want to have a look at this post on @NgModule for an alternative bootstrap strategy for production.
[…]
Let's take a look at a form built according to the template driven way:
There is actually quite a lot going on in this simple example. What we have done here is to declare a simple form with two controls: first name and password, both of which are mandatory fields (marked with the required attribute).
[…]
