Angular Validator - CustomRule

A rule with custom validation logic.

import { CustomRule } from "devextreme/common"
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

If you set this property to false, the rule is checked only when you change an editor's value. If you enter a value and validate the editor's value twice, the validation callback is executed only once.

If you set this property to true, the rule is checked every time an editor is validated. If you enter a value and validate the editor's value twice, the validation callback is executed twice.

type

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

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,
  • // ...
  • ],
  • // ...
  • })