Angular Validator - RequiredRule

A validation rule that demands that a validated field has a value.

import { RequiredRule } from "devextreme/common"
Type:

Object

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).

View Demo

See Also

message

Specifies the message that is shown if the rule is broken.

Type:

String

Default Value: 'Required'

An error message can be specified as follows:

  • Hard-code the message

    app.component.html
    app.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.html
    app.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.html
    app.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 { }

trim

Indicates whether to remove the Space characters from the validated value.

Type:

Boolean

Default Value: true

To keep the Space characters within the validated value, set this field to false.

type

Specifies the rule type. Set it to "required" to use the RequiredRule.