Angular Validator - RangeRule
A validation rule that demands the target value be within the specified value range (including the range's end points).
To specify the range that the validated value must match, set the rule's min and max configuration properties. Note that the specified range can be on a date-time or numeric scale. To validate a value against a string length, use the stringLength rule.
See Also
message
An error message can be specified as follows:
Hard-code the message
jQuery
index.js$(function() { $("#textBox").dxTextBox({ ... }) .dxValidator({ type: "range", message: "My custom message" }); });
Angular
app.component.htmlapp.module.ts<dx-text-box> <dx-validator> <dxi-validation-rule type="range" 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 { }
Vue
App.vue<template> <DxTextBox> <DxValidator> <DxRangeRule message="My custom message" /> </DxValidator> </DxTextBox> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxTextBox } from 'devextreme-vue/text-box'; import { DxValidator, DxRangeRule } from 'devextreme-vue/validator'; export default { components: { DxTextBox, DxValidator, DxRangeRule } } </script>
React
App.jsimport React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { TextBox } from 'devextreme-react/text-box'; import { Validator, RangeRule } from 'devextreme-react/validator'; class App extends React.Component { render() { return ( <TextBox> <Validator> <RangeRule message="My custom message" /> </Validator> </TextBox> ); } } export default App;
Hide the message
jQuery
index.js$(function() { $("#textBox").dxTextBox({ ... }) .dxValidator({ type: "range", message: "" }); });
Angular
app.component.htmlapp.module.ts<dx-text-box> <dx-validator> <dxi-validation-rule type="range" 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 { }
Vue
App.vue<template> <DxTextBox> <DxValidator> <DxRangeRule message="" /> </DxValidator> </DxTextBox> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxTextBox } from 'devextreme-vue/text-box'; import { DxValidator, DxRangeRule } from 'devextreme-vue/validator'; export default { components: { DxTextBox, DxValidator, DxRangeRule } } </script>
React
App.jsimport React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { TextBox } from 'devextreme-react/text-box'; import { Validator, RangeRule } from 'devextreme-react/validator'; class App extends React.Component { render() { return ( <TextBox> <Validator> <RangeRule message="" /> </Validator> </TextBox> ); } } export default App;
Display the editor's name in the message
jQuery
index.js$(function() { $("#textBox").dxTextBox({ ... }) .dxValidator({ name: "Age", // The error message will be "Age is out of range" validationRules: [{ type: "range" }] }); });
Angular
app.component.htmlapp.module.ts<dx-text-box> <!-- The error message will be "Age is out of range" --> <dx-validator name="Age"> <dxi-validation-rule type="range"> </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 { }
Vue
App.vue<template> <DxTextBox> <!-- The error message will be "Age is out of range" --> <DxValidator name="Age"> <DxRangeRule /> </DxValidator> </DxTextBox> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxTextBox } from 'devextreme-vue/text-box'; import { DxValidator, DxRangeRule } from 'devextreme-vue/validator'; export default { components: { DxValidator, DxRangeRule } } </script>
React
App.jsimport React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { TextBox } from 'devextreme-react/text-box'; import { Validator, RangeRule } from 'devextreme-react/validator'; class App extends React.Component { render() { return ( <TextBox> {/* The error message will be "Age is out of range" */} <Validator name="Age"> <RangeRule} /> </Validator> </TextBox> ); } } export default App;
reevaluate
Indicates whether the rule should be always checked for the target value or only when the target value changes.
type
If you have technical questions, please create a support ticket in the DevExpress Support Center.