Angular Validator - CustomRule

A rule with custom validation logic.

Type:

Object

To specify the custom rule, set the type to "custom" and declare the validationCallback function.

You can also set a custom message, specify whether empty values are valid, and whether the rule should be re-evaluated, even if the target value is the same.

See Also

ignoreEmptyValue

If true, the validationCallback is not executed for null, undefined, false, and empty strings.

Type:

Boolean

Default Value: false

message

Specifies the message that is shown if the rule is broken.

Type:

String

Default Value: 'Value is invalid'

An error message can be specified as follows:

  • Hard-code the message

    app.component.html
    app.module.ts
    • <dx-text-box>
    • <dx-validator>
    • <dxi-validation-rule
    • type="custom"
    • message="My custom message">
    • </dxi-validation-rule>
    • </dx-validator>
    • </dx-text-box>
    • import { BrowserModule } from '@angular/platform-browser';
    • import { NgModule } from '@angular/core';
    • import { AppComponent } from './app.component';
    •  
    • import { DxValidatorModule,
    • DxTextBoxModule } from 'devextreme-angular';
    •  
    • @NgModule({
    • declarations: [
    • AppComponent
    • ],
    • imports: [
    • DxTextBoxModule,
    • BrowserModule,
    • DxValidatorModule
    • ],
    • providers: [],
    • bootstrap: [AppComponent]
    • })
    • export class AppModule { }
  • Hide the message

    app.component.html
    app.module.ts
    • <dx-text-box>
    • <dx-validator>
    • <dxi-validation-rule
    • type="custom"
    • message="">
    • </dxi-validation-rule>
    • </dx-validator>
    • </dx-text-box>
    • import { BrowserModule } from '@angular/platform-browser';
    • import { NgModule } from '@angular/core';
    • import { AppComponent } from './app.component';
    •  
    • import { DxValidatorModule,
    • DxTextBoxModule } from 'devextreme-angular';
    •  
    • @NgModule({
    • declarations: [
    • AppComponent
    • ],
    • imports: [
    • BrowserModule,
    • DxValidatorModule,
    • DxTextBoxModule
    • ],
    • providers: [],
    • bootstrap: [AppComponent]
    • })
    • export class AppModule { }
  • Display the editor's name in the message

    app.component.html
    app.module.ts
    • <dx-text-box>
    • <!-- The error message will be "Password is invalid" -->
    • <dx-validator name="Password">
    • <dxi-validation-rule
    • type="custom">
    • </dxi-validation-rule>
    • </dx-validator>
    • </dx-text-box>
    • import { BrowserModule } from '@angular/platform-browser';
    • import { NgModule } from '@angular/core';
    • import { AppComponent } from './app.component';
    •  
    • import { DxValidatorModule,
    • DxTextBoxModule } from 'devextreme-angular';
    •  
    • @NgModule({
    • declarations: [
    • AppComponent
    • ],
    • imports: [
    • BrowserModule,
    • DxValidatorModule,
    • DxTextBoxModule
    • ],
    • providers: [],
    • bootstrap: [AppComponent]
    • })
    • export class AppModule { }

reevaluate

Indicates whether the rule should be always checked for the target value or only when the target value changes.

Type:

Boolean

Default Value: false

type

Specifies the rule type. Set it to "custom" to use the CustomRule.

Type:

String

Accepted Values: 'required' | 'numeric' | 'range' | 'stringLength' | 'custom' | 'compare' | 'pattern' | 'email' | 'async'

validationCallback

A function that validates the target value.

Type:

Function

Function parameters:
options:

Object

An object defining validation parameters.

Object structure:
Name Type Description
column

Object

The column to which the cell being validated belongs. Exists only when you validate a built-in editor in the DataGrid or TreeList.

data

Object

The current row's data. Exists only when you validate a DataGrid or TreeList cell's value.

formItem

Object

The form item being validated. Exists only when you validate a built-in editor in the Form UI component.

rule

Object

The rule being checked.

validator

Object

The Validator object that initiated the validation.

value

String

|

Number

The validated value.

Return Value:

Boolean

true if the value is valid; otherwise, false.

The following code shows a validationCallback example. The function accepts a number and returns true if the number is even and false if it is odd:

HTML
TypeScript
  • <dx-number-box [value]="4">
  • <dx-validator>
  • <dxi-validation-rule type="custom"
  • [validationCallback]="validateNumber"
  • message="An even number is expected">
  • </dxi-validation-rule>
  • </dx-validator>
  • </dx-number-box>
  • import { DxNumberBoxModule, DxValidatorModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • validateNumber(e) {
  • return e.value % 2 == 0;
  • }
  • }
  • @NgModule({
  • imports: [
  • DxNumberBoxModule,
  • DxValidatorModule,
  • // ...
  • ],
  • // ...
  • })