Showing validation errors in Angular - Performance & Optimization

Performance: Showing validation errors

MEDIUM IMPACT

This affects interaction responsiveness and visual stability when users input data and see validation feedback.

Display form validation errors to users on input

Angular

template: `<input [(ngModel)]="name" (blur)="validateName()" /> <div [style.visibility]="showError ? 'visible' : 'hidden'">Name is required</div>`;

component: {
  name = '';
  showError = false;
  validateName() {
    this.showError = !this.name || this.name.length === 0;
  }
}

Validation runs only on blur event, reducing frequent DOM updates and reflows during typing.

📈 Performance GainSingle reflow on blur instead of multiple reflows per keystroke, improving input responsiveness.

Display form validation errors to users on input

Angular

template: `<input [(ngModel)]="name" /> <div *ngIf="!nameValid">Name is required</div>`;

component: {
  get nameValid() {
    return this.name && this.name.length > 0;
  }
}

Using getters that run on every change detection and rendering error messages with *ngIf causes frequent DOM updates and reflows.

📉 Performance CostTriggers multiple reflows on each keystroke and blocks rendering for tens of milliseconds on complex forms.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Validation on every keystroke with *ngIf	High (many DOM toggles)	Multiple reflows per input	High paint cost due to layout shifts	[X] Bad
Validation on blur with visibility toggle	Low (few DOM changes)	Single reflow on blur	Low paint cost, stable layout	[OK] Good

Rendering Pipeline

Validation error display affects the Layout and Paint stages because showing or hiding error messages changes DOM nodes and styles.

→Layout

→Paint

→Composite

⚠️ BottleneckLayout is most expensive due to DOM changes when error messages appear or disappear.

Core Web Vital Affected

INP

This affects interaction responsiveness and visual stability when users input data and see validation feedback.

Optimization Tips

1Run validation less frequently, e.g., on blur instead of every keystroke.

2Toggle visibility of error messages instead of adding/removing DOM nodes.

3Avoid complex expressions in templates that run on every change detection.

Performance Quiz - 3 Questions

What is the main performance problem with running validation on every keystroke?

A It increases bundle size significantly.

B It triggers many reflows and repaints, slowing input responsiveness.

C It causes the page to reload.

D It disables keyboard navigation.

DevTools: Performance

How to check: Record a performance profile while typing in the form and observe the number of reflows and layout thrashing events.

What to look for: Look for frequent Layout events and long scripting times indicating inefficient validation updates.