An angular custom cross-field validator for multiple groups of form input fields

A demo angular application with unit and e2e tests, for the article at: http://clade.co.uk/adewole/blog/angular/cross-field-validation

I wanted to share my experience and gather feedback on creating a custom Angular cross-field validator that compares and validates the values of multiple groups of input fields and their relative confirm input fields. The app is built with Angular – strict mode, for both reactive and template-driven forms.

By Ade Oyebadejo

Technology

This project was generated with Angular CLI version 10.0.5.

Version 2.0.0 - Project updated to Angular version 16 Using Node version 18.10.0 Version 3.0.0 - Project updated to Angular version 17 Using Node version 18.13.0

Getting Started

# Clone the repository
git clone https://github.com/ade-dev/angular-cross-field-validation.git

# Navigate to the app's root directory
cd angular-custom-cross-validator

# Install the dependencies
npm install

# Run the application
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Cypress.