Search⌘ K
Home
Courses
Build Reactive Websites with RxJS: Master Observables and Wrangle

Validating Address and Credit Card

Explore how to validate addresses with layered synchronous and asynchronous checks against a backend, and understand implementing custom credit card validation using the Luhn algorithm in Angular reactive forms. Learn to combine validation logic into a cohesive form group model.

We'll cover the following...

Validating an address

The address section has two layers of validation.

First, each item needs to have its own individual set of validators, but the address as a whole needs to be checked against the backend to ensure that it’s a valid address.

The individual validations are simple:

TypeScript 3.3.4
const addressModel = {
  street: ['', Validators.required],
  apartment: [''],
  city: ['', Validators.required],
  state: ['', Validators.required],
  zip: ['', [
    Validators.required,
    Validators.pattern(/\d{5}/)
  ]]
};

The backend check assembles the current value of the entire form and checks it against the backend.

Async validators only run when all of the synchronous ...