All 5 Forms questions
More in Forms
What is the difference between template driven forms and reactive forms in Angular? How do you prevent a form from reloading the page when it is submitted in Angular? How would you build a dynamic form with a variable number of fields, such as a list of phone numbers, using reactive forms? How would you create a custom asynchronous validator that checks something against a server, such as whether a username is already taken?
Advertisement
Angular › Forms

How do you add validation to a reactive form field, and how do you show an error message to the user?

Intermediate

Answer

You pass one or more validator functions, like Validators.required, when creating a FormControl, and check the control's valid and touched properties in your template to decide whether to show a specific error message.
form = new FormGroup({
  email: new FormControl('', [Validators.required, Validators.email])
});

<input [formControl]="form.controls.email" />
@if (form.controls.email.invalid && form.controls.email.touched) {
  <p>Please enter a valid email address</p>
}
Real-world example A signup form shows a clear error message right below the email field the moment a user tabs away from an invalid entry, using Angular's built in validators combined with the control's touched and invalid state.

Common follow-ups: What is the difference between the touched and dirty properties on a form control?;How would you create your own custom validator function for a rule Angular does not provide built in?

Angular Security (XSS Sanitization & CSP);Data Binding
All 5 Forms questions