Class Validators

An extension of the default Angular Validators provided by the Angular team.

This also includes some helper validators which may be useful for more complex validations. Such as validation based on another control.

You can add your own Validators to this by simply extending this class.

Example

// Requires firstName, only if lastName is provided.
new FormGroup({
  firstName: new FormControl('', Validators.any('lastName'));
  lastName: new FormControl('');
});

Hierarchy

  • Validators
    • Validators

Constructors

constructor

Methods

all allEqual any anyEqual blacklist creditCard equal if inRange numeric stateCode stateName streetAddress zipCode

Constructors

constructor

Methods

Staticall

  • all(...controlNames: string[]): ValidatorFn

  • The control is considered invalid if all the control names have a truthy value.

    Parameters

    • ...controlNames: string[]

      the control names to search for a truthy value.

    Returns ValidatorFn

    Example

    const form = new FormGroup({
        field1: new FormControl('', Validators.all('field2', 'field3')),
        field2: new FormControl('foo'),
        field3: new FormControl('bar'),
    });

StaticallEqual

  • allEqual(...controlValuePairs: ControlValuePair[]): ValidatorFn

  • The control is considered valid if any of the given control pairs do not match.

    Parameters

    • ...controlValuePairs: ControlValuePair[]

      a list of lists with 2 elements, [controlName, controlValue]

    Returns ValidatorFn

    Example

    const form = new FormGroup({
        field1: new FormControl('', Validators.allEqual(['field2', 'foo'], ['field3', 'bar'])),
        field2: new FormControl('foo'),
        field3: new FormControl('bar'),
    });

Staticany

  • any(...controlNames: string[]): ValidatorFn

  • The control is considered invalid if any of the control names have a truthy value.

    Parameters

    • ...controlNames: string[]

      the control names to search for a truthy value.

    Returns ValidatorFn

    Example

    const form = new FormGroup({
        field1: new FormControl('', Validators.any('field2', 'field3')),
        field2: new FormControl(''),
        field3: new FormControl('bar'),
    });

StaticanyEqual

  • anyEqual(...controlValuePairs: ControlValuePair[]): ValidatorFn

  • The control is considered invalid if any control pairs match.

    Parameters

    • ...controlValuePairs: ControlValuePair[]

      a list of lists with 2 elements, [controlName, controlValue]

    Returns ValidatorFn

    Example

    const form = new FormGroup({
        field1: new FormControl('', Validators.anyEqual(['field2', 'foo'], ['field3', 'bar'])),
        field2: new FormControl('foo'),
        field3: new FormControl(''),
    });

Staticblacklist

  • blacklist(...values: string[]): ValidatorFn

  • The control is considered valid if the value entered is not included in the given values list.

    Parameters

    • ...values: string[]

      the values to blacklist.

    Returns ValidatorFn

    Example

    const form = new FormGroup({
        username: new FormControl('', Validators.blackList('dang', 'heck'))
    });

StaticcreditCard

  • creditCard(control: AbstractControl): null | ValidationErrors

  • Parameters

    • control: AbstractControl

    Returns null | ValidationErrors

Staticequal

  • equal(value: any): ValidatorFn

  • The control is considered valid when the value of the control is equal to the value given. If the control has a falsy value, then this check will not occur.

    Parameters

    • value: any

      the value to check against

    Returns ValidatorFn

    Example

    const form = new FormGroup({
        field1: new FormControl('1234', Validators.equal('1234')),
        field2: new FormControl('', Validators.equal('1234')),
        field3: new FormControl('123', Validators.equal('1234')),
    });

Staticif

  • if(condition: boolean): ValidatorFn

  • The control is considered invalid if the given condition is met.

    Parameters

    • condition: boolean

      the condition to determine if this is a required field or not.

    Returns ValidatorFn

    Example

    const mustRespond = true;

    const form = new FormGroup({
       field1: new FormControl('', Validators.if(mustRespond)),
    });

StaticinRange

  • inRange(start: number, end: number): ValidatorFn

  • The control is considered valid if it is within the given range. Start is inclusive, end is exclusive. Represented as [start, end).

    Parameters

    • start: number

      inclusive start

    • end: number

      exclusive end

    Returns ValidatorFn

    Example

    const form = new FormGroup({
        age: new FormControl(67, Validators.inRange(18, 100))
    });

    Note

    value needs to be numeric, if it is a string, it will do it's best to perform a numeric comparison. If unable to, then it will be considered in range. For example, null would not return any errors.

Staticnumeric

  • numeric(control: AbstractControl): null | ValidationErrors

  • Parameters

    • control: AbstractControl

    Returns null | ValidationErrors

StaticstateCode

  • stateCode(control: AbstractControl): null | ValidationErrors

  • The control is considered a valid state code as long as it matches a state code in America.

    Parameters

    • control: AbstractControl

    Returns null | ValidationErrors

    Example

    const form = new FormGroup({
        stateCode: new FormControl('CT', Validators.stateCode);
    });

    Note

    this is case-insensitive. Search time is constant.

StaticstateName

  • stateName(control: AbstractControl): null | ValidationErrors

  • The control is considered a valid state name as long as it matches a state in America.

    Parameters

    • control: AbstractControl

    Returns null | ValidationErrors

    Example

    const form = new FormGroup({
        stateName: new FormControl('connecticut', Validators.stateName);
    });

    Note

    this is case-insensitive. Search time is constant.

StaticstreetAddress

  • streetAddress(control: AbstractControl): null | ValidationErrors

  • The control is considered valid as long as it matches our criteria for an Address.

    Parameters

    • control: AbstractControl

    Returns null | ValidationErrors

    Example

    // All Valid
    const form = new FormGroup({
       streetAddress1: new FormControl('123 Main St', Validators.streetAddress),
       streetAddress2: new FormControl('456 Elm Street Apt 5', Validators.streetAddress),
       streetAddress3: new FormControl('789-B Oak Rd', Validators.streetAddress),
       streetAddress4: new FormControl('101 First Ave, Unit #4', Validators.streetAddress),
    });
    // Invalid
    form.get('streetAddress1').setValue('Apartment ##123');

StaticzipCode

  • zipCode(control: AbstractControl): null | ValidationErrors

  • The control is considered a valid zip code if it is in the 5 digit or 5 plus 4 digit syntax. Therefore, if you prefer one over the other, you should pair this control with a length check.

    Parameters

    • control: AbstractControl

    Returns null | ValidationErrors

    Example

    const form = new FormGroup({
        zip1: new FormControl('05434', Validators.zipCode),
        zip2: new FormControl('43424-2343', Validators.zipCode),
    });

    Note

    this will allow both 5-digit zip codes or 5 plus 4.

Settings

Member Visibility

On This Page

Constructors
Methods