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!
Learn More About Angular 🚀
Tags:
- #Articles
- #Webd
- #Angular
- #Validation
- #Error
- #Messages
- #FullStackPrep