Angular's Built-in Form Validators

Why it exists

User input needs to be validated to ensure data integrity before it's processed or sent to a server. Writing logic for every common case—like checking if a field is empty, has a minimum length, or is a valid email—is repetitive and error-prone. Angular provides a standard library to handle these common cases out of the box.

The mental model

Think of the Validators class as a toolbox of pre-built functions you attach to your form fields. Instead of building your own "is this an email?" checker from scratch, you just grab Validators.email from the toolbox. These are static methods that you import and apply directly to a FormControl.

How it works

The Validators class provides static methods like Validators.required, Validators.minLength(5), or Validators.pattern(/\d+/). You pass these functions (or an array of them) as the second argument when creating a FormControl. When the control's value changes, Angular runs each validator function. If validation fails, the function returns an error object (e.g., { required: true }); otherwise, it returns null. The form control's errors property will then hold this object, which you can use to display contextual error messages in your template.

When to use it

Use built-in validators for any standard, single-field validation need in both template-driven and reactive forms. They cover the most frequent use cases: checking for presence (required), ensuring a checkbox is ticked (requiredTrue), enforcing length (minLength, maxLength), setting numerical bounds (min, max), and matching formats (email, pattern).

When not to use it

Built-in validators are not suited for complex, multi-field validation (e.g., "password must not contain username") or for asynchronous checks (like verifying a username's availability with a server). For those scenarios, you need to write a custom validator or an async validator, respectively.

One canonical example

To create a form control for a password that must be at least 8 characters long, you would write: const password = new FormControl('', Validators.minLength(8));. If a user enters '12345', the control becomes invalid. Checking password.errors would return an object like { minlength: { requiredLength: 8, actualLength: 5 } }, which you can use to show a specific error message.