What’s the Best Way to Display Angular Error Messages?

If you find this explanation helpful, feel free to give it a like or share—let’s spread the learning!

---

Think of Angular form validation as running a tailor shop for clothes. Imagine I’m the tailor, and each customer walking into my shop represents a form field. They’re here for a fitting, and I want to ensure that every piece of clothing they try on fits just right before they leave.

When a customer tries on a shirt (enters a value in a field), I check how it fits. Is the length correct? Are the sleeves the right size? These checks are like Angular’s validators—required, minLength, or pattern—each one assessing if the value meets certain standards.

Now, here’s the fun part. If something’s off—say the sleeves are too short or the pattern doesn’t match—I gently tell the customer what needs fixing. This is where I display the validation error messages. In Angular, I would use ngIf to show messages for each specific problem. It’s like pointing out, “This shirt’s sleeves are too short; let’s try a larger size.”

But I don’t just leave the customers standing there confused. I organize the process with helpful signs. For example, I have a tag system (FormControl.errors) that categorizes each issue. If the shirt is too small, I hang a “too small” tag on it. This way, I know exactly what’s wrong and can display a corresponding message.

To make everything smoother, I even set up rules in advance (custom validators) for tricky cases. It’s like having a special measuring tape for customers with unique requests, ensuring their needs are also met.

In the end, once every customer leaves with a perfectly fitting outfit (the form is valid), I smile, knowing my shop (application) is running just as it should.

---

Setting Up the Shop (Defining the Form)

In Angular, I first need to define my shop’s layout—how I’ll measure and validate the form fields. This is done with FormGroup and FormControl:

import { FormBuilder, Validators } from '@angular/forms';

// Setting up the form
myForm = this.fb.group({
  name: ['', [Validators.required, Validators.minLength(3)]], // A required name field with min length 3
  email: ['', [Validators.required, Validators.email]],      // An email field requiring a valid format
  age: ['', [Validators.min(18), Validators.max(65)]]        // Age must be between 18 and 65
});

constructor(private fb: FormBuilder) {}

Here, Validators are like the measurement tools. They check if each form field passes specific tests (e.g., “Is the shirt’s length at least 3?”).

---

Displaying Errors (Communicating with the Customer)

When a customer picks a shirt that doesn’t fit (enters invalid input), I need to gently explain what’s wrong. This is where the error messages come in:

<form [formGroup]="myForm">
  <div>
    <label for="name">Name</label>
    <input id="name" formControlName="name">
    <div *ngIf="myForm.get('name')?.errors?.required && myForm.get('name')?.touched">
      Name is required.
    </div>
    <div *ngIf="myForm.get('name')?.errors?.minlength && myForm.get('name')?.touched">
      Name must be at least 3 characters.
    </div>
  </div>

  <div>
    <label for="email">Email</label>
    <input id="email" formControlName="email">
    <div *ngIf="myForm.get('email')?.errors?.required && myForm.get('email')?.touched">
      Email is required.
    </div>
    <div *ngIf="myForm.get('email')?.errors?.email && myForm.get('email')?.touched">
      Please enter a valid email address.
    </div>
  </div>

  <div>
    <label for="age">Age</label>
    <input id="age" type="number" formControlName="age">
    <div *ngIf="myForm.get('age')?.errors?.min && myForm.get('age')?.touched">
      Age must be at least 18.
    </div>
    <div *ngIf="myForm.get('age')?.errors?.max && myForm.get('age')?.touched">
      Age cannot exceed 65.
    </div>
  </div>

  <button [disabled]="myForm.invalid">Submit</button>
</form>

• touched ensures the error message only appears after the user interacts with the field (like waiting until the customer actually tries the shirt on).
• errors gives me the specific issue tag, so I know exactly what to tell the user.

---

Custom Validators (Special Requests)

Sometimes, a customer needs something unique—like a tailored rule that can’t be covered by standard Validators. For example, if they want a custom measurement, I’d create a new tool:

import { AbstractControl, ValidationErrors } from '@angular/forms';

function forbiddenNameValidator(forbiddenName: string) {
  return (control: AbstractControl): ValidationErrors | null => {
    const forbidden = control.value === forbiddenName;
    return forbidden ? { forbiddenName: { value: control.value } } : null;
  };
}

// Adding the custom validator
myForm = this.fb.group({
  name: ['', [Validators.required, forbiddenNameValidator('Admin')]],
});

Here, any customer named “Admin” is flagged with a custom error message.

---

Key Takeaways / Final Thoughts

1. Analogies Help: Like a tailor shop, Angular form validation ensures that each form field “fits” its rules perfectly.
2. Validation Tools: Built-in validators (like required or minLength) and custom validators help enforce rules.
3. Error Messages: Use ngIf to display specific, friendly error messages tied to form field issues.
4. Dynamic Feedback: Combining errors and touched ensures users only see errors after interacting with fields.

By combining these techniques, I create forms that are robust, user-friendly, and adaptable to any scenario. Just like in a tailor shop, clear communication and attention to detail make all the difference!