Validation Decorators

The Decorators

This is the complete list of decorators

  • Required: Property must have a value
  • MaxLength: Max number of chars (string only)
  • MinLength: Min number of chars (string only)
  • StringLength: this is a convenient union of MaxLength and MinLength
  • Pattern: A regular expression
  • Range: A range of type number or of type Date for the property’s value
  • Email: Check whether the property contains a valid email
  • Compare: Compare this property with another (think of two password fields)
  • Custom: A base class that uses a callback to let you provide your own valdiator

Required

Makes a field mandatory. Uses the Required valdiator Angular provides. The decorator can optionally get an error message. If this is omitted, a default message appears:

The field <fieldname> is required

Usage:

@Required()
phoneNumber: string = '';

MaxLength

Limits a field to a given number of characters. Applies to string types only. Uses the MaxLength valdiator Angular provides. The decorator can optionally get an error message. If this is omitted, a default message appears:

The field <fieldname> has max length of <len> characters

Usage:

@MaxLength(25)
phoneNumber: string = '';

MinLength

Requires a field to have at least certain number of characters. Applies to string types only. The decorator can optionally get an error message. If this is omitted, a default message appears:

The field <fieldname> needs at least <len> characters

Usage:

@MinLength(2)
name: string = '';

StringLength

This is a combination on MinLength and MaxLength, that makes it convenient to use both in one step. It creates two messages separately for Min and Max (same as shown there).

Usage:

@StringLength(2, 25, "Something is wrong here")
name: string = '';

E-Mail

Requires a field to contain a n email. Applies to string types only. Uses a regular expression to check the email. The decorator can optionally get an error message. If this is omitted, a default message appears:

The field <fieldname> must contain a valid e-mail address

Usage:

@Email()
mail: string = '';

Range

Validates a field against an range. Applies to numerical values or dates. The decorator can optionally get an error message. If this is omitted, a default message appears:

The field <fieldname> does not fall within the range from <from> to <to>

Usage:

@Range(13, 88)
age: number = 23;

Compare

The compare decorator, compares two field’s values and shows an error message on the decorated field. The other field (compared to) does not has a decorator nor receives a message.

The field <fieldname> must have the same value as field <other>

Usage:

@Compare('pw2')
pw1: string = '';

pw2: string = '';

Pattern

The decorator assures that a string field fullfilles a regular expression pattern. The decorator can optionally get an error message. If this is omitted, a default message appears:

The field <fieldname> must fullfill the pattern <pattern>

Usage:

@Pattern(/^.*$/)
input: string = '';

Use this to check URL, Creditcard Pattern, and other form stuff.