Store and Use Regex Const Validator in Angular 8 Reactive Formbuilder

Question

How do I store a Regex Validator pattern for reuse and Dry principal in Angular? Have a reactive formbuilder with Regex validator pattern below for ZipCode.

Need to apply to multiple address forms, curious how to save /^\d{1,5}$/

So we can write Validators.pattern(zipcode), or any syntax utilized in Angular? Company has more complicated long patterns for phone numbers, customer number, etc.

'ZipCode': [null, [Validators.maxLength(16), Validators.pattern(/^\d{1,5}$/)]],

Looking for a way to store and utilize maybe in constants.

This is for Angular 2:

ng-pattern to use regex from angular constants

I think your pattern is not working try '^\d{1,5}$' instead of /^\d{1,5}$/ — Ashot Aleqsanyan
– Ashot Aleqsanyan, Commented Dec 24, 2019 at 6:24
yeah, its working on my end, just more curious about saving a regex pattern in variable, and using for later, thanks — user12555362
– user12555362, Commented Dec 24, 2019 at 6:29

Plochie · Accepted Answer · 2019-12-24 06:45:47Z

0

You can store your validations in some .ts files, suppose validations.ts.

Then use these validations wherever required. You can also have parameter Validators.

validation.ts

export const ZipValidation = Validators.pattern(/^\d{1,5}$/);
export const EmailValidation = Validators.pattern(/*some regex*/);
export const UsernameValidation = Validators.pattern(/*some regex*/);
export const ValidWithParam = (param: number) => {
  return Validators.pattern('/\d' + param + '/g');
}

In Component

import { ZipValidation, EmailValidation, UsernameValidation } from './validation';
'ZipCode': [null, [Validators.maxLength(16), ZipValidation]],

edited Dec 24, 2019 at 6:45

answered Dec 24, 2019 at 6:31

Plochie

4,1171 gold badge20 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Plochie Over a year ago

Create array like const temp = [Validators.min(-90), Validators.max(90)] and use that array using spread operator in validators. e.g. [...temp]

user12555362 Over a year ago

here is the question stackoverflow.com/questions/59465475/…

timur · Accepted Answer · 2019-12-24 11:08:48Z

0

Best thing is to have a main root-level shared service and store all the patterns inside it.

Whenever you need it - you can use it by referring to the shared service. And via that particular service if you can implement a endpoint(if possible) so that it will be possible to configure the Validators via your application backend.

Otherwise you can hardcode the Validators patterns in the service itself.

edited Dec 24, 2019 at 11:08

timur

14.6k2 gold badges15 silver badges36 bronze badges

answered Dec 24, 2019 at 6:35

Selaka Nanayakkara

6,9963 gold badges27 silver badges60 bronze badges

2 Comments

Selaka Nanayakkara Over a year ago

This is fairly straight forward. I see some correct answers on top. So that i shared my view. One thing is important. All the above mentioned answers will do. But if you configure it in endpoint you will not have to go through build processes all over again. For example what if on fly company wants add another Validator. Those will be catered via using configurable endpoint. Otherwise you will have to go to the Front end, add Validator build and deploy.

user12555362 Over a year ago

yeah, we already using shared service, this can be placed in comments below answer, thanks

Collectives™ on Stack Overflow

Store and Use Regex Const Validator in Angular 8 Reactive Formbuilder

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related