Angular Validator - CustomRule
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.
message
An error message can be specified as follows:
Hard-code the message
app.component.htmlapp.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.htmlapp.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.htmlapp.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
validationCallback
Name | Type | Description |
---|---|---|
column |
The column to which the cell being validated belongs. Exists only when you validate a built-in editor in the DataGrid or TreeList. |
|
data |
The current row's data. Exists only when you validate a DataGrid or TreeList cell's value. |
|
formItem |
The form item being validated. Exists only when you validate a built-in editor in the Form UI component. |
|
rule |
The rule being checked. |
|
validator |
The Validator object that initiated the validation. |
|
value | | |
The validated value. |
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:
- <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,
- // ...
- ],
- // ...
- })
If you have technical questions, please create a support ticket in the DevExpress Support Center.