How does form validation work in Angular?

Angular supports form validation via built-in and custom validators applied to form controls or groups. It supports both template-driven and reactive forms.

What are Angular built-in validators?

Angular includes built-in validators such as required, minLength, maxLength, and email for common input checks.

How do you validate a form in Angular | FullStackPrep.Dev

💡 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 FormControl or FormGroup with validators.
📋 Template-driven: Use required, minlength, etc., in template with NgModel.
🧠 Real-time feedback with formControl.errors or ngIf checks 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!

📄 PDF Download Coming Soon

How do you validate a form in Angular