How do you validate a form in Angular
💡 Concept Name
Form Validation – A mechanism in Angular to ensure user inputs meet certain criteria before form submission using built-in or custom validators.
📘 Quick Intro
Angular provides robust validation support for both template-driven and reactive forms. It includes built-in validators (like required, minLength) and allows custom validators to be written for more complex logic.
🧠 Analogy / Short Story
Form validation is like airport security. Each input field is a passenger that must pass checks (validators) before being allowed to board (submit). If something doesn’t comply—like missing documents—the journey stops.
🔧 Technical Explanation
- ✅ Built-in Validators:
Validators.required,minLength,maxLength,email. - 🧪 Custom Validators: User-defined functions that return an error object or null.
- 🔄 Used in both Template-driven and Reactive Forms.
- 📦 Reactive Forms: Use
FormControlorFormGroupwith validators. - 📋 Template-driven: Use
required,minlength, etc., in template withNgModel. - 🧠 Real-time feedback with
formControl.errorsorngIfchecks in templates.
🎯 Purpose & Use Case
- ✅ Ensure all form fields are properly filled before submission.
- ✅ Prevent bad or incomplete data from entering the system.
- ✅ Provide real-time user feedback and improve UX.
💻 Real Code Example
// Reactive Form Validation Example
import { FormGroup, FormControl, Validators } from '@angular/forms';
form = new FormGroup({
email: new FormControl('', [Validators.required, Validators.email]),
password: new FormControl('', [Validators.required, Validators.minLength(6)])
});
onSubmit() {
if (this.form.valid) {
console.log('Form Data:', this.form.value);
} else {
console.log('Form Invalid');
}
}
❓ Interview Q&A
Q1: What is the purpose of form validation?
A: To ensure that user inputs meet expected requirements before being processed or submitted.
Q2: Name some built-in validators in Angular.
A: required, minLength, maxLength, email.
Q3: How do you apply a validator to a FormControl?
A: Pass validators in the constructor of FormControl.
Q4: How to display validation messages in the template?
A: Use *ngIf with formControl.errors.
Q5: What is a custom validator?
A: A function that returns an error object if invalid, or null if valid.
📝 MCQs
Q1. Which validator checks if input is not empty?
- Validators.minLength
- Validators.required
- Validators.email
- Validators.max
Q2. Where are Angular validators applied in Reactive Forms?
- NgModel
- FormBuilder
- Template
- FormControl/FormGroup
Q3. What does a custom validator return?
- Boolean
- Error object or null
- String
- void
Q4. Which form type uses ngModel for validation?
- Reactive
- Template-driven
- Hybrid
- Server-side
Q5. How do you check if a form is valid?
- .isValid()
- .status
- .valid
- .validate()
Q6. Which validator checks input length?
- Validators.max
- Validators.required
- Validators.minLength
- Validators.length
Q7. How to display validation error?
- Check .value
- Check .length
- Check .errors property
- Check .message
Q8. Which form approach allows better control over validation logic?
- Reactive Forms
- Template-driven
- Dynamic Forms
- Material Forms
Q9. What triggers validation in a reactive form?
- Submit
- Button click
- FormControl status change
- Page load
Q10. What is Validators.email used for?
- Check empty
- Compare strings
- Validate email format
- Hash input
💡 Bonus Insight
For complex validation involving multiple fields (e.g., password confirmation), use FormGroup level custom validators to cross-validate values.
📄 PDF Download
Need a handy summary for your notes? Download this topic as a PDF!