React Validator - PatternRule
import { PatternRule } from "devextreme/common"
Type:
To specify the regular expression that the validated field must match, set the rule's pattern configuration property.
NOTE
If you apply a pattern rule to a DateBox component, specify dateSerializationFormat so that the format of the validated value is a string.
See Also
message
Type:
Default Value: 'Value does not match pattern'
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="pattern"
- 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="pattern"
- 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 "Phone number does not match pattern" -->
- <dx-validator name="Phone number">
- <dxi-validation-rule
- type="pattern">
- </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 { }
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.