Angular Validator - RequiredRule
import { RequiredRule } from "devextreme/common"
Type:
Use this rule type to ensure the target editor value is specified. The rule will be broken in the following cases.
- If the validated value is null, false, or undefined.
- If the specified value has a type that is not expected for the target field (e.g., a string for the DateBox UI component).
See Also
message
Type:
Default Value: 'Required'
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="required"
- 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="required"
- 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 required" -->
- <dx-validator name="Password">
- <dxi-validation-rule
- type="required">
- </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.