Angular Validator - EmailRule
import { EmailRule } from "devextreme/common"
Type:
DevExtreme components use the following Email pattern:
- pattern: /^[\d\w._-]+@[\d\w._-]+\.[\w]+$/i
See Also
message
Type:
Default Value: 'Email is invalid'
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="email"
- 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="email"
- 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 "Mail address is invalid" -->
- <dx-validator name="Mail address">
- <dxi-validation-rule
- type="email">
- </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.