What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Angular validates forms in two ways: reactive forms attach validator functions to controls in the component, while template-driven forms use HTML attributes that Angular connects to validator directives. Choose reactive forms for complex, reusable, or test-heavy forms; template-driven forms are usually simpler when the form’s logic can stay in its template.
Choose reactive or template-driven forms
Both approaches expose validation state and errors, but they place the form model and rules in different places. Angular’s forms overview describes reactive forms as explicit, synchronous, scalable, and testable; template-driven forms derive their model from template directives and use asynchronous data flow.
| Consideration | Reactive forms | Template-driven forms |
|---|---|---|
| Where the model lives | Explicitly defined in the component class | Built from directives in the template |
| How validation is configured | Validator functions attached to controls or groups | HTML validation attributes matched to Angular validator directives |
| Data flow | Synchronous | Asynchronous |
| Best suited to | Complex, central, reusable, or test-heavy forms | Basic forms whose logic can remain in the template |
| Testing | Generally less setup and less dependence on change detection | Can require more setup and manual change-detection considerations |
These are Angular’s documented distinctions, not a rule that every project must follow. Existing architecture and the complexity of the form are also relevant.
Validate a reactive form
In a reactive form, define controls in the component and pass validator functions such as Validators.required to them. The reactive forms guide explains how to build this explicit model. Angular’s validation guide documents built-in validators and custom validation.
#1 Best Overall
A validator receives a control and returns either an error object or null. The object identifies the validation error, which the template can inspect to decide what message to show. For example, a required validator reports a required-field error when the value is missing.
Attach validators to the control whose value they check. When a rule depends on several values, validate their parent form group instead; the cross-field section below explains that pattern.
Validate a template-driven form
In a template-driven form, add supported HTML validation attributes such as required or minlength to an input. Angular matches those attributes to validator directives and tracks the resulting state. The template-driven forms guide covers building the form model with directives.
Use a template variable to inspect the state. Export an input’s NgModel or the form reference into a variable, then read its validity and errors in the template. Angular’s validation examples use this state to determine when to show a message.
Rank #3
Show errors when they help the user
Show a message when the relevant control has an error and the user has interacted with it, rather than relying on color alone. Angular’s examples check states such as dirty and touched, then inspect specific error keys so the message explains what needs fixing.
- For a required field, check the required error and explain that a value is needed.
- For a minimum-length rule, check the corresponding length error and state the required minimum.
- Keep the error associated with its input, and use the form’s validity to govern whether submission is available when that suits the form.
Using both a specific error and an interaction state avoids showing an error before the user has had a reasonable chance to enter a value.
Validate related fields together
Use a cross-field validator when the validity of one value depends on another—for example, when two fields must agree. In a reactive form, attach the validator to the group containing those controls so it can compare sibling values. The result belongs to the group, not necessarily to either individual control.
For a template-driven form, wrap the cross-field rule in a directive and register it with NG_VALIDATORS. In either style, have the template read the group-level error and show a message that explains the relationship between the fields.
Use asynchronous validation carefully
An asynchronous validator returns a Promise or Observable, commonly to check a value against a server. Angular runs asynchronous validators only after synchronous validators pass, which avoids making a remote check for a value that already fails a local rule.
By default, an async check can run on each value change, potentially producing repeated backend requests while someone types. Configure the form control’s update timing when immediate checking is unnecessary: updateOn: 'blur' waits until focus leaves the control, while updateOn: 'submit' waits for submission. Choose the timing that fits the check and the feedback users need. Angular documents these options in its form-validation guide.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Free tools Windows power users keep installed
One-click scans. No signup required.
