Angular 8 - Reactive Forms Validation Example | Angular Form Validation Example

Forms are always an integral part of our application. In angular, we build the form in  2 ways either template-driven or model-driven/reactive forms.

Here we are going to discuss reactive forms with Angular. Reactive forms are more scalable and can be managed easily. It's much simple way to validate the reactive forms. There are a number of validations which are commonly used in our application. Here we'll discuss the following validations:

  1. Confirm Password Validation in Angular 8
  2. URL Validation in Angular 8
  3. Age-Old Validation in Angular 8
  4. Up to Decimal Point Validation in Angular 8
  5. Number Validation in Angular 8
  6. Alpha Numeric Validation in Angular 8
  7. Email Id Validation in Angular 8
  8. Credit Card Validation in Angular 8

Code for all the above validations can be found here



Let me create a service which I'll use to validate the forms in my application: src/app/Services/validation.service

Now let me create a validation message component. This is the common component which will be used throughout the forms to show the validation message.

Components/Validation/validation-messages.component

I'm using validation service here in this component to call the getValidatorErrorMessage function. I'm calling this function when touching the controls or the controls are dirty.

Now we can create a component which has the registration form to show all the validation with the examples.

./Components/Users/Register/register.component.ts

./Components/Users/Register/register.component.html

After creating RegisterComponent register this component to app.module.ts also imports ReactiveFormsModule and FormsModule for using reactive form.

Here I have register ValidationMessagesComponent as an entry component because this component will have no routing. I also have imported AppRouting in app.module.ts. Here below is the routing file.

app.component.html

Code here to download the code

Share This:

Leave a Reply

Your email address will not be published. Required fields are marked *