Angular Form Validation

What is Form Validation in Angular?

Angular ships built-in validators — required, minLength, maxLength, pattern, email, min, max — and exposes the failures through a control’s errors object so the template can show the right message.

Form Validation example

@if (email.touched && email.errors) {
  @if (email.errors['required']) { <small>Email is required</small> }
  @if (email.errors['email'])    { <small>Enter a valid email address</small> }
}

A reusable helper

errorFor(name: string): string | null {
  const c = this.form.get(name);
  if (!c || !c.touched || !c.errors) return null;
  if (c.errors['required']) return 'This field is required';
  if (c.errors['email'])    return 'Enter a valid email address';
  if (c.errors['minlength']) return `At least ${c.errors['minlength'].requiredLength} characters`;
  return 'Invalid value';
}

Key points to remember

• errors is null when the control is valid — always guard before reading it.
• Error keys are lowercase: minlength and maxlength, not minLength.
• Show errors only after touched or after a submit attempt.
• Always validate again on the server.

Common mistakes with Form Validation

• Reading errors.minLength with a capital L and always getting undefined.
• Relying only on the HTML required attribute in a reactive form, where it does not create a validator.