Skip to content

Class property decorators

Jump to bottom
Misha Sulikashvili edited this page Dec 7, 2018 · 22 revisions

This library has following class property decorators and types:

1. DataType(param: { value: DataTypeEnum, error: string })
2. CreditCard(param: { error: string })
3. Contains(param: { value: string, error: string })
4. Compare(param: { field: string, error: string })
5. Name(param: string)
6. Required(param:  string)
7. RequiredIf(param: { field: string, value: any, error: string })
8. Pattern(param: { value: RegExp, error: string })
9. MinValue(param: { value: number | Date, error: string })
10. MaxValue(param: { value: number | Date, error: string })
11. NotContains(param: { value: string, error: string })
12. StringLength(param: { min?: number, max?: number, error: string })
13. Email(param: string)
14. Range(param: {min?: number | Date, max?: number | Date, error: string})
15. Custom(param: { value?: any, error: string, customFunc: Function })
16. NoForm()
17. ReadOnly()
18. Placeholder(param: string)

//Class decorator
19. ModelState()

export enum DataTypeEnum {
    Int,
    Number,
    MultilineText,
    Url,
    ImageUrl,
    Password,
    Hexadecimal,
    Date,
    Array,
    Upload
}

export interface CssInputModel {
    group: string;
    label: string;
    input: string;
    error: string;
}

export type PropertyFunction<T> = () => T;

Usage

Suppose, we have following class. For this library, in order to function properly, each class instance should be created by new keyword. new Hero(), in this case.

class Hero {

  id: number;
  heroName?: string;
  email: string;
  creditCard: string;
  bankAccount: string;
  mobile: string;
  age: number;
  power: number;
  birthdate: Date;
  password: string;
  confirmPassword: string;
  driverLicenseNumber: string;
  alterEgo?: string;
}

DataType

Checks entered value and generates error if entered value is not number.

  @DataType({value: DataTypeEnum.Number, error: 'Value should be number'})
  age: number;

CreditCard

Checks if entered value is valid credit card number

  @CreditCard({ error: 'Value should be a valid credit card number' })
  creditCard: string;

Contains

Checks if entered value contains some user defined value.

  @Contains({ value: 'ick', error: 'Value should contain "ick"' })
  heroName: string;

Compare

Checks if property value matches user specified property's value

  @Compare({ field: 'password', error: 'value does not match password' })
  confirmPassword: string;

Name

Defines property name. Used by <ngx-label-for>

  @Name('Hero\'s  email')
  email: string;

Required

Checks if property value is not null or undefined

  @Required('Hero\'s name is required')
  heroName?: string;

RequiredIf

Checks if value is set if class's other property has specific value

  @RequiredIf({ field: 'age', value: 18, error: 'hero should have driver\'s license number' })
  driverLicenseNumber: string;

Pattern

Checks if entered value matches specified pattern

  @Pattern({ value: /^[0-9]{6}$/, error: 'Value should be a valid phone number' })
  mobile: string;

MinValue

Checks if entered value is greater than specified value

  @MinValue({ value: 21, error: 'Hero\'s age should be more than 21' })
  age: number;

MaxValue

Checks if entered value is less than specified value

  @MaxValue({ value: 60, error: 'Hero\'s age should be no more than 60' })
  age: number;

NotContains

Checks if entered value contains some user defined value.

  @NotContains({ value: 'ick', error: 'Value should contain "ick"' })
  heroName: string;

StringLength

Checks if entered value's length is greater than min and less than max value. Parameter min is optional

  @StringLength({ min: 5, max: 10, error: 'field must be  {0} and max {1} simbols length' })
  heroName?: string;

Email

Checks if entered value is valid email

  @Email('Value should be an email')
  email: string;

Range

Checks if entered value is in specified range

  @ValueRange({min: 21, max: 60, error: 'Hero\'s age should be between 21 and 60 years'})
  age: number;

Custom

Defines custom validation logic and checks if entered value meets it

  @Custom({
    value: 17, error: 'Hero\'s age should not be when email is "pref.ge1@gmail.com" and name is "Ricci"', 
   customFunc: (value: number, hr: Hero) => {
      if (hr.email === 'pref.ge1@gmail.com' && hr.heroName === 'Ricci') {
        return false;
      }
      return true;
    }
  })
  age: number;

NoForm

Tells <ngx-form-for> form generator component not to generate input for this property

  @NoForm()
  id?: number;

ReadOnly

Sets input to readonly mode

  @ReadOnly()
  alterEgo?: string;

Placeholder

Sets input's placeholder value

  @Placeholder('Input hero\'s name')
  heroName: string;

ModelState

Experimental feature, may introduce breaking changes in future. In order this decorator to work properly, class should have the following two properties of function type:

@ModelState
Class Hero{
  IsValid: PropertyFunction<boolean>;
  ModelErrors: PropertyFunction<{ [key: string]: any }>;

  Id: number;
  
  @Name('Hero Name')
  @Required('field required')
  @Placeholder('placeholder')
  @Email('Value should be an email')
  @StringLength({ min: 5, max: 10, error: 'field must be  {0} and max {1} symbols length' })
  heroName?: string;
}

Then, ModelState decorator implements them and they return the following data: IsValid() returns validation result of class instance, ModelErrors() returns class validation errors object.

Clone this wiki locally