Chapter 11. Validating forms

The user fills out a form and clicks Submit, expecting that the app will process the data in some way. In web applications, the data is usually sent to the server. Often, the user receives some data back (for example, search results), but sometimes, the data is just saved in the server’s storage (for example, creating a new order). In any case, the data should be valid so the server’s software can do its job properly.

For example, an app can’t log in a user unless they’ve provided a user ID and a password in the login form. Both fields are required—otherwise, the form isn’t valid. You shouldn’t even allow submitting this form until the user has filled out all required fields. A user registration form may be considered invalid if the password doesn’t contain at least 8 characters, including a number, an uppercase letter, and a special character.

In this chapter, we’ll show you how to validate forms in Angular using built-in validators and how to create custom forms. At the end of the chapter, you’ll develop a new version of ngAuction that will include three fields. The entered values will be validated first, and only afterward will they be submitted for finding products that meet entered criteria.

We’ll start exploring built-in validators by using a reactive form and then move to a template-driven one.

11.1. Using built-in validators

11.2. Controlling when validation starts

11.3. Custom validators in reactive forms

11.4. Validating a group of controls

11.5. Checking a form control’s status and validity

11.6. Changing validators dynamically in reactive forms

11.7. Asynchronous validators

11.8. Custom validators in template-driven forms

11.9. Adding a search form to ngAuction

Summary