Build Reactive Websites with RxJS: Master Observables and Wrangle/

...

/

Validating Address and Credit Card

Validating Address and Credit Card

Let's see how we can validate addresses and credit cards in Angular using Rx.

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:

Press + to interact
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 ...