Displaying Validation Error Messages in Angular

💡 Concept Name

Validation Error Messages

📘 Quick Intro

Angular forms offer built-in validation, but displaying user-friendly error messages requires custom templates or components that react to validation state changes.

🧠 Analogy / Short Story

Think of form validation like traffic lights: green means go (valid), yellow warns you to slow down (warning), and red stops you (error). Error messages guide users just like red signals caution.

🔧 Technical Explanation

✅ **Template-driven forms:** Use `ngModel` & `
` blocks.
✅ **Reactive forms:** Access `FormControl.errors` in template or component and display messages.
✅ **Custom validators:** Return error objects like `{ invalidName: true }` and target them in message templates.
✅ **Async validation:** Handle pending state and show messages after server response.

🎯 Purpose & Use Case

✅ Improve UX by guiding users to correct input.
✅ Prevent invalid data submission to backend.
✅ Customize messages for localization and branding.

💻 Real Code Example

<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <label for="email">Email</label>
  <input id="email" formControlName="email" />
  <div class="error" *ngIf="email.invalid && (email.dirty || email.touched)">
    <small *ngIf="email.errors.required">Email is required.</small>
    <small *ngIf="email.errors.email">Enter a valid email.</small>
  </div>

  <button type="submit" [disabled]="userForm.invalid">Submit</button>
</form>

// Component getter
get email() { return this.userForm.get('email'); }

❓ Interview Q&A

Q1: How do you check if a control is invalid in template-driven forms?
A: Use `#f="ngForm"` and check `f.form.controls['field'].invalid`.

Q2: Which property holds validation errors in reactive forms?
A: `FormControl.errors`.

Q3: How to display custom validator message?
A: Return error object and use `*ngIf` on that key.

Q4: What trigger states can you use?
A: `dirty`, `touched`, `submitted`.

Q5: How to disable submit on invalid form?
A: Bind `[disabled]="form.invalid"` on button.

📝 MCQs

Q1. Which directive shows error blocks in template-driven forms?

*ngFor
*ngIf
[hidden]
[disabled]

Q2. What does FormControl.errors return?

Boolean
Error map or null
String
Number

Q3. When does email.errors.email become true?

Empty value
Invalid email format
Field touched
Form submitted

Q4. How to check touched state?

control.dirty
control.touched
control.pristine
control.pending

Q5. Which method initializes form group?

FormBuilder()
new FormGroup
createForm()
initForm()

Q6. Which event fires submit?

submitClick
ngSubmit
onSubmit
formSubmit

Q7. To disable submit, you use?

(disabled)
[disabled]
disabled()
disable()

Q8. What class marks invalid input?

ng-valid
ng-pristine
ng-invalid
ng-touched

Q9. How to show all errors after submit?

dirty flag
touched flag
submitted flag
valid flag

Q10. Where to define custom validator?

Only in component
Only in service
In component or directive
In module

💡 Bonus Insight

Abstract common error display into a reusable component to reduce template code and maintain consistent styling across forms.

📄 PDF Download

Need a handy summary for your notes? Download this topic as a PDF!

📄 PDF Download Coming Soon