DEV Community: Alkademy

Angular Reactive Forms Validation — Complete Guide (2026)

Alkademy — Sun, 28 Jun 2026 23:10:23 +0000

Canonical URL: Republished from munonye.com. Try the live demo: StackBlitz

Overview

Complete guide to Angular reactive forms validation with Angular 19: built-in validators, custom validators, cross-field checks, async validation, and FormArray.

Prerequisites: Basic reactive forms (Part 2 on munonye.com)

Estimated time: ~50 minutes

Step 1 — Setup (standalone)

import { Component, inject } from '@angular/core';
import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-signup',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './signup.component.html'
})
export class SignupComponent {
  private fb = inject(FormBuilder);
  form = this.fb.group({
    email: ['', [Validators.required, Validators.email]],
    password: ['', [Validators.required, Validators.minLength(8)]],
    confirmPassword: ['', Validators.required]
  });
}

Step 2 — Display errors

<input formControlName="email">
<span *ngIf="form.get('email')?.invalid && form.get('email')?.touched">
  Enter a valid email
</span>

Call this.form.markAllAsTouched() on failed submit.

Step 3 — Custom validator

export function noWhitespace(): ValidatorFn {
  return (control) => {
    const v = (control.value || '').trim();
    return v.length ? null : { whitespace: true };
  };
}

Step 4 — Password match (cross-field)

function passwordMatch(group: AbstractControl): ValidationErrors | null {
  const pass = group.get('password')?.value;
  const confirm = group.get('confirmPassword')?.value;
  return pass === confirm ? null : { passwordMismatch: true };
}

form = this.fb.group({ password: [''], confirmPassword: [''] }, { validators: passwordMatch });

Step 5 — Async validator

username: ['', [Validators.required], [usernameTakenValidator]]

Show <span *ngIf="form.get('username')?.pending">Checking…</span> while pending.

Full guide with FormArray, dynamic validators, and FAQ: munonye.com/angular-reactive-forms-validation-complete-guide-2026/

Angular CRUD Tutorial (2026 Edition) — Part 1: Setup with Spring Boot

Alkademy — Sun, 28 Jun 2026 23:09:40 +0000

Canonical URL: This article is republished from the original on munonye.com. Read the full six-part series and updated Angular 19 code there.

Introduction

In this tutorial you'll set up a Friends CRUD application with:

FriendsAPI — Spring Boot REST backend (port 9001)
FriendsUI — Angular frontend (port 9002)

This is Part 1 of 6. The complete roadmap is on munonye.com.

Prerequisites: Node.js 18+, Angular CLI, Java 17+, basic TypeScript and REST fundamentals.

Estimated time: ~45 minutes.

Angular 19 Setup (Updated 2026)

Modern Angular uses standalone components and functional providers — no AppModule required.

Create the project

npm install -g @angular/cli@latest
ng new friends-ui --routing --style=scss --ssr=false
cd friends-ui
ng serve --port 9002

Bootstrap with HttpClient

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { AppComponent } from './app/app.component';
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes), provideHttpClient()]
});

Standalone root component

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  template: `<router-outlet></router-outlet>`
})
export class AppComponent {}

Environment config

// src/environments/environment.ts
export const environment = {
  production: false,
  apiUrl: 'http://localhost:9001/api/friends'
};

Injectable service

import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../environments/environment';

@Injectable({ providedIn: 'root' })
export class FriendService {
  private http = inject(HttpClient);
  private base = environment.apiUrl;

  getAll() {
    return this.http.get<Friend[]>(this.base);
  }
}

Spring Boot REST API

Create a Spring Boot project with Web, JPA, and H2 dependencies. Add:

FriendController.java
Friend.java (entity)
FriendService.java
FriendRepository.java
data.sql for seed data

Reference implementation: product-app-spring-api on GitHub

server.port=9001
spring.datasource.url=jdbc:h2:mem:friendsdb
spring.jpa.hibernate.ddl-auto=update

What's next

Part	Topic	Link
2	GET — list records	Part 2 on munonye.com
3	POST — create	Part 3
4	Details view	Part 4
5	PUT — edit	Part 5
6	DELETE	Part 6

Complete guide (all parts): munonye.com/angular-crud-spring-boot-rest-api-complete-guide/

About the author

Kindson Munonye — software engineer and technical author.

GitHub · LinkedIn · About · YouTube

Axon Framework CQRS Tutorial — Step by Step (2026)

Alkademy — Sun, 28 Jun 2026 23:03:02 +0000

Canonical URL: Republished from munonye.com. Full microservices hub: munonye.com/microservices-tutorials/

What you'll build

Command side: CreateOrderCommand → OrderAggregate → OrderCreatedEvent
Event store: Axon Server
Query side: OrderProjection → H2 read model → REST GET

Prerequisites: Java 17+, Spring Boot 3.x, Axon Server

Step 1 — Dependencies

<dependency>
  <groupId>org.axonframework</groupId>
  <artifactId>axon-spring-boot-starter</artifactId>
  <version>4.9.3</version>
</dependency>

Step 2 — Configure Axon Server

axon.axonserver.servers=localhost:8124
spring.application.name=order-service

Run ./axonserver — UI at http://localhost:8024.

Step 3 — Aggregate

@Aggregate
public class OrderAggregate {
  @AggregateIdentifier private String orderId;

  @CommandHandler
  public OrderAggregate(CreateOrderCommand cmd) {
    AggregateLifecycle.apply(new OrderCreatedEvent(cmd.getOrderId(), cmd.getProductId()));
  }

  @EventSourcingHandler
  public void on(OrderCreatedEvent event) {
    this.orderId = event.getOrderId();
  }
}

Step 4 — Query projection

@EventHandler
public void on(OrderCreatedEvent event) {
  repo.save(new OrderView(event.getOrderId(), event.getProductId(), "CREATED"));
}

Step 5 — REST

POST /orders → CommandGateway.send(CreateOrderCommand)
GET /orders/{id} → read from OrderViewRepository

Full code walkthrough with curl tests: read on munonye.com →

About the author

Kindson Munonye — GitHub · LinkedIn · About