Exporting a validator for Angular reactive form

Question

I am trying to create a ValidatorFn that will be used in several components which represent custom reactive form controls. My initial idea was to generate a TypeScript class, create a public static function (or several) there and then just use it like so: myFGroup.setValidators(ReactiveValidators.myValidator).

The problem is, although I imported this ReactiveValidators class in the app.module and added it to declarations: [], I still get the favorite error:

error TS2307: Cannot find module 'src/app/validators/reactive-validators'

Can someone tell me what I am doing wrong? Also, is this approach even a good one at all?

Answer 1

As per @dzenesiz he figured out issue, the issue was in importing syntax.

The correct import statement is import.

{ maxInputLengthValidator } from '../../validators/reactive-validators'

Notice the relative path. And, for some reason, VS Code auto import uses absolute path, the one in the error message. I fixed the path, now it works

Answer 2

A ValidatorFun is just a function, which is not required to be in any class. You can simply create a ts file with exported Validator functions.

export const myValidator: ValidatorFn = /* ... */;
export const myOtherValidator: ValidatorFn = /* ... */;
export function myJustAnotherValidator(/* ... */) { /* ... */ }

And you can import them like import { myValidator, myOtherValidator } from '../mypath/reactive-validators'; Or import * as ReactiveValidators from '../mypath/reactive-validators';

No module import required