ngx-validated-routes
Library for validating Angular Route parameters.
Simple, easy to use library for Angular, that validates format of Route parameters. It gives you ability to specify route parameter types (validators) with route definition, so you don't need to validate parameters in each component.
Installation
First you need to install the npm module:
npm install ngx-validated-routes --save
Usage
You have to import ValidatedRoutesModule.forRoot()
in your AppRoutingModule
or AppModule
.
import {NgModule} from '@angular/core';
import {ValidatedRoutesModule, createValidatedRoutes, RouteParamValidators, ValidatedRoutes} from 'ngx-validated-routes';
import {RouterModule} from '@angular/router';
import {TeamComponent} from 'team.component';
const routes: ValidatedRoutes = createValidatedRoutes([
{
path: 'team/:teamId',
component: TeamComponent,
data: {
paramValidators: {
teamId: RouteParamValidators.positiveNumber,
},
},
},
//...
]);
@NgModule({
imports: [
ValidatedRoutesModule.forRoot({
fallback: '/404',
requireValidators: true,
}),
RouterModule.forRoot(routes),
],
exports: [RouterModule],
})
export class AppRoutingModule { }
API
ValidatedRoutesModule
ValidatedRoutesModule::forRoot(config?: ValidatedRoutesConfig): ModuleWithProviders<ValidatedRoutesModule>
Creates and configures the module.
ValidatedRoutesConfig
-
fallback
: string or callback function- if string is passed, it's used as redirect URL when parametr does not match given validator, eg:
ValidatedRoutesModule.forRoot({ fallback: '/404', }), ],
- if callback function is passed, it's called with ActivatedRouteSnapshot that did not pass as parameter, eg:
ValidatedRoutesModule.forRoot({ fallback: (route: ActivatedRouteSnapshot): void => { // do something }, }), ],
-
requireValidators
: boolean- if is set to true, all params must have specified validators
- default value:
false
Basic data types
ValidatedRoute
Has same signature as Route
, but property data
is replaced with ValidatedRouteData
, which adds optional parameter paramValidators?: ParamValidators
.
ParamTypes
Object where you should define validators for ValidatedRoute
params.
ParamType
Is validator function or RegExp, that checks ValidatedRoute
params.
You can provide RegExp or custom callback function which takes ValidatedRoute
param value as parameter and returns boolean.
const route: ValidatedRoute = {
path: 'team/:teamId/events/:eventId',
component: TeamEventComponent, // Your component or whatever
data: {
paramValidators: {
// validate teamId parameter with callback function
teamId: (paramValue: string) => paramValue.length > 1,
// validate eventId parameter with RegExp, RegExp constructor could be used as well
eventId: /^[\d]+$/
},
},
};
Or you can use one of predefined validators:
RouteParamValidators
Set of predefined useful type validators:
RouteParamValidators.number
- validates that parameter includes only numbers, eg:
const data: ValidatedRouteData = {
paramTypes: {
teamId: RouteParamValidators.number,
},
// ...
},
RouteParamValidators.positiveNumber
- validates that parameter includes only numbers and is greater than zero, eg:
const data: ValidatedRouteData = {
paramTypes: {
teamId: RouteParamValidators.positiveNumber,
},
// ...
},
RouteParamValidators.token
- validates that parameter includes only alphanumeric characters (a-Z, 0-9)
const data: ValidatedRouteData = {
paramTypes: {
teamId: RouteParamValidators.token,
},
// ...
},
RouteParamValidators.maxLength(maxLength: number)
- validates that parameter length is not greater than specified maxLength
const data: ValidatedRouteData = {
paramTypes: {
teamId: RouteParamValidators.maxLength(10),
},
// ...
},
RouteParamValidators.and(paramTypes: ParamType[])
- combines two or more type validators, all of them must pass, eg:
const data: ValidatedRouteData = {
paramTypes: {
teamId: RouteParamValidators.and([RouteParamValidators.number, RouteParamValidators.maxLength(10)]),
},
// ...
},
RouteParamValidators.or(paramTypes: ParamType[])
- combines two or more type validators, at least on of them must pass, eg:
const data: ValidatedRouteData = {
paramTypes: {
teamId: RouteParamValidators.or([RouteParamValidators.number, RouteParamValidators.maxLength(10)]),
},
// ...
},
- validators can be combined, as needed:
const data: ValidatedRouteData = {
paramTypes: {
teamId: RouteParamValidators.or([
RouteParamValidators.and([RouteParamValidators.number, RouteParamValidators.maxLength(10)]),
RouteParamValidators.positiveNumber,
]),
},
// ...
},
Further information
For further information see tests or type declaration files.