Ways to extract a validator function from a text input

Question

Ways to extract a validator function from a text input

How can I transform this string array into an array of validator functions?

let valStrings: string[] = ["Validators.required", "Validators.maxLength(10)"];

Convert it to:

let validators: ValidatorFn[] = [ Validators.required, Validators.maxLength(10) ];

I am working on centralizing validation rules for our web application to ensure consistency between server and client validation. These strings are retrieved from a HttpClient call with a JSON response.

The array of validators will be used in a FormControl to enable reactive form validation in Angular.

Should I consider using eval() in this scenario?

Thanks -Adam

angular typescript angular5

Answer 1

Answer №1

It is not recommended to define validation on the server using Angular code in a string format. Instead, consider creating an API for handling dynamic validations like this:

validations: {
  name: {
    maxLength: 10,
    required: true
  }
}

Using eval for this purpose is not advisable as it introduces security risks and may be disabled on your site by Content Security Policy (CSP).

Avoid converting strings to code directly as it would require a parser. If Angular's validation rules change, you would need to update all forms accordingly.

Furthermore, if you plan to connect an iOS app to your API, parsing Angular validation rules from strings can be cumbersome and error-prone.

Answer 2

It is not recommended to define validation on the server using Angular code in a string format. Instead, consider creating an API for handling dynamic validations like this:

validations: {
  name: {
    maxLength: 10,
    required: true
  }
}

Using eval for this purpose is not advisable as it introduces security risks and may be disabled on your site by Content Security Policy (CSP).

Avoid converting strings to code directly as it would require a parser. If Angular's validation rules change, you would need to update all forms accordingly.

Furthermore, if you plan to connect an iOS app to your API, parsing Angular validation rules from strings can be cumbersome and error-prone.

Answer 3

Answer №2

In order to achieve this, I rely on the use of conditional statements.

let valStrings: string[] = ["Validators.required", "Validators.maxLength(10)"];
let validators=valString.map(x=>{
    switch (x)
    {
        if (x=="Validators.required")
            return Validators.required;
        if (x.startsWith("Validators.maxLength")
        {
            let length=+(x.split('(')[1].split(')')[0]);
            return Validators.maxLength(length)
        }
    }
});

Answer 4

In order to achieve this, I rely on the use of conditional statements.

let valStrings: string[] = ["Validators.required", "Validators.maxLength(10)"];
let validators=valString.map(x=>{
    switch (x)
    {
        if (x=="Validators.required")
            return Validators.required;
        if (x.startsWith("Validators.maxLength")
        {
            let length=+(x.split('(')[1].split(')')[0]);
            return Validators.maxLength(length)
        }
    }
});

Answer 5

Answer №3

A map of validation can be easily implemented within an abstracted service for reusability purposes.


export const schema = {
    "defaultValidations": {
        'title': [
            { name: 'required' },
            { name: 'minLength', args: [3] }
        ],
        'firstName': [
            { name: 'required' },
            { name: 'minLength', args: [3] },
            { name: 'maxLength', args: [50] }
        ]
    }
}

export interface Dictionary<T> {
    [Key: string]: T;
}

  validationMap: Dictionary<any> = {
    "required": (arg: any[]) => Validators.required,
    "minLength": (arg: number[]) => Validators.minLength(arg[0]),
    "maxLength": (arg: number[]) => Validators.maxLength(arg[0])
  };

  constructor(private fb: FormBuilder) { }

  // function to map validations
  mapValiations(key: string) :ValidatorFn[] {
    const validations = schema.defaultValidations[key]?.map(element => {
        return this.validationMap[element.name](element?.args);
     });

     return validations;
  }

Answer 6

A map of validation can be easily implemented within an abstracted service for reusability purposes.


export const schema = {
    "defaultValidations": {
        'title': [
            { name: 'required' },
            { name: 'minLength', args: [3] }
        ],
        'firstName': [
            { name: 'required' },
            { name: 'minLength', args: [3] },
            { name: 'maxLength', args: [50] }
        ]
    }
}

export interface Dictionary<T> {
    [Key: string]: T;
}

  validationMap: Dictionary<any> = {
    "required": (arg: any[]) => Validators.required,
    "minLength": (arg: number[]) => Validators.minLength(arg[0]),
    "maxLength": (arg: number[]) => Validators.maxLength(arg[0])
  };

  constructor(private fb: FormBuilder) { }

  // function to map validations
  mapValiations(key: string) :ValidatorFn[] {
    const validations = schema.defaultValidations[key]?.map(element => {
        return this.validationMap[element.name](element?.args);
     });

     return validations;
  }

Ways to extract a validator function from a text input

Answer №1

Answer №2

Answer №3

Similar questions

Utilizing TypeScript in an AngularJS (1.x) project alongside Webpack: A Step-By-Step Guide

Error encountered when performing Change Detection in Angular Material with ngOnChanges, displaying message, "ExpressionChangedAfterItHasBeenCheckedError"

Required Ionic form field alert

skipSelector is not recognized

Resolving the Issue: How to Solve the "Missing Required Request Body" Error in Angular and Spring MVC

using lodash to convert objects into arrays while maintaining parent-child relationships

Dependencies exclusively for NPM post-installUnique Rewrite: "N

Remove default focus from angular 2 material input field

Encountering an error stating "unable to access properties of undefined (reading 'redirectUri')"

What kind of null/undefined is being assumed?

Maintain a continuous live server for your Angular 2/4 application

ng serve issue persists even after resolving vulnerabilities

What is the correct way to access $auth in Nuxt with TypeScript?

How can you prevent specific dates from being selected in an Angular Datepicker?

Navigating the NextJS App Directory: Tips for Sending Middleware Data to a page.tsx File

Is there a way to remove a specific column from a table in Angular?

The parameter of type 'void' cannot be assigned to a parameter of type 'SetStateAction<never[]>' in this context

Increasing the token size in the Metaplex Auction House CLI for selling items

Mapping objects in Typescript to create a union of objects

Combining data types to create a unified set of keys found within a complex nested structure