Your search did not match any results.
Documentation

This demo shows how to validate the Form editors. Validation rules are specified for each form item using the validationRules option. All editors on the form are combined into a validation group defined by the form’s validationGroup option.

Note that the «Register» button here does not implement a usual onClick event handler. Instead, it has the useSubmitBehavior option set to true. This setting tells the button to validate and submit the HTML form in which it is nested, with no further configuration required.

Copy to Plunker
Apply
Reset
<form action="your-action" (submit)="onFormSubmit($event)"> <dx-form id="form" [formData]="customer" [readOnly]="false" [showColonAfterLabel]="true" [showValidationSummary]="true" validationGroup="customerData"> <dxi-item itemType="group" caption="Credentials"> <dxi-item dataField="Login"> <dxi-validation-rule type="required" message="Login is required"> </dxi-validation-rule> </dxi-item> <dxi-item dataField="Password" [editorOptions]="{ mode: 'password' }"> <dxi-validation-rule type="required" message="Password is required"> </dxi-validation-rule> </dxi-item> <dxi-item editorType="dxTextBox" [editorOptions]="{ mode: 'password' }"> <dxo-label text="Confirm Password"> </dxo-label> <dxi-validation-rule type="required" message="Confirm Password is required"> </dxi-validation-rule> <dxi-validation-rule type="compare" [comparisonTarget]="passwordComparison" message="Password and Confirm Password do not match"> </dxi-validation-rule> </dxi-item> </dxi-item> <dxi-item itemType="group" caption="Personal Data"> <dxi-item dataField="Name"> <dxi-validation-rule type="required" message="Name is required"> </dxi-validation-rule> <dxi-validation-rule type="pattern" [pattern]="namePattern" message="Do not use digits in the Name"> </dxi-validation-rule> </dxi-item> <dxi-item dataField="Date" editorType="dxDateBox" [editorOptions]="{ invalidDateMessage: 'The date must have the following format: MM/dd/yyyy' }"> <dxo-label text="Date of birth"> </dxo-label> <dxi-validation-rule type="required" message="Date of birth is required"> </dxi-validation-rule> <dxi-validation-rule type="range" [max]="maxDate" message="You must be at least 21 years old"> </dxi-validation-rule> </dxi-item> </dxi-item> <dxi-item itemType="group" caption="Billing address"> <dxi-item dataField="Country" editorType="dxSelectBox" [editorOptions]="{ dataSource: countries }"> <dxi-validation-rule type="required" message="Country is required"> </dxi-validation-rule> </dxi-item> <dxi-item dataField="City"> <dxi-validation-rule type="pattern" [pattern]="cityPattern" message="Do not use digits in the City name"> </dxi-validation-rule> <dxi-validation-rule type="stringLength" [min]="2" message="Name must have at least 2 symbols"> </dxi-validation-rule> <dxi-validation-rule type="required" message="City is required"> </dxi-validation-rule> </dxi-item> <dxi-item dataField="Address"> <dxi-validation-rule type="required" message="Address is required"> </dxi-validation-rule> </dxi-item> <dxi-item dataField="Phone" helpText="Enter the phone number in USA phone format" [editorOptions]="{ mask: '+1 (X00) 000-0000', maskRules: phoneRules, useMaskedValue: true, maskInvalidMessage: 'The phone must have a correct USA phone format' }"> <dxi-validation-rule type="pattern" [pattern]="phonePattern" message="The phone must have a correct USA phone format"> </dxi-validation-rule> </dxi-item> </dxi-item> <dxi-item itemType="simple" dataField="Accepted" editorType="dxCheckBox" [editorOptions]="{ text: 'I agree to the Terms and Conditions', value: false }"> <dxo-label [visible]="false"> </dxo-label> <dxi-validation-rule type="compare" [comparisonTarget]="checkComparison" message="You must agree to the Terms and Conditions"> </dxi-validation-rule> </dxi-item> </dx-form> <br /> <dx-button text="Register" type="success" validationGroup="customerData" [useSubmitBehavior]="true"> </dx-button> </form>
import { NgModule, Component, ViewChild, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxCheckBoxModule, DxSelectBoxModule, DxNumberBoxModule, DxButtonModule, DxFormModule, DxFormComponent } from 'devextreme-angular'; import notify from 'devextreme/ui/notify'; import { Customer, Service } from './app.service'; if(!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', providers: [ Service ], templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'] }) export class AppComponent { @ViewChild(DxFormComponent) form:DxFormComponent password = ""; passwordOptions: any = { mode: "password", value: this.password }; customer: Customer; countries: string[]; maxDate: Date = new Date(); cityPattern = "^[^0-9]+$"; namePattern: any = /^[^0-9]+$/; phonePattern: any = /^\+\s*1\s*\(\s*[02-9]\d{2}\)\s*\d{3}\s*-\s*\d{4}$/; phoneRules: any = { X: /[02-9]/ } passwordComparison = () => { return this.form.instance.option("formData").Password; }; checkComparison() { return true; } constructor(service: Service) { this.maxDate = new Date(this.maxDate.setFullYear(this.maxDate.getFullYear() - 21)); this.countries = service.getCountries(); this.customer = service.getCustomer(); } onFormSubmit = function(e) { notify({ message: "You have submitted the form", position: { my: "center top", at: "center top" } }, "success", 3000); e.preventDefault(); } } @NgModule({ imports: [ BrowserModule, DxCheckBoxModule, DxSelectBoxModule, DxNumberBoxModule, DxButtonModule, DxFormModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
/deep/ form { margin: 10px; }
import { Injectable } from '@angular/core'; export class Customer { Login: string; Password: string; Name: string; Date: Date; Country: string; City: string; Address: string; Phone: string; Accepted: boolean; } let customer : Customer = { "Login": "", "Password": "", "Name": "Peter", "Date": null, "Country": "", "City": "", "Address": "", "Phone": "", "Accepted": false }; let countries: string[] = [ 'Afghanistan','Albania','Algeria','Andorra','Angola','Antigua and Barbuda','Argentina','Armenia','Australia','Austria','Azerbaijan','The Bahamas','Bahrain','Bangladesh','Barbados','Belarus','Belgium','Belize','Benin','Bhutan','Bolivia','Bosnia and Herzegovina','Botswana','Brazil','Brunei','Bulgaria','Burkina Faso','Burma','Burundi','Cambodia','Cameroon','Canada','Cape Verde','Central African Republic','Chad','Chile','China','Colombia','Comoros','Democratic Republic of the Congo','Republic of the Congo','Costa Rica','Ivory Coast','Croatia','Cuba','Cyprus','Czech Republic','Denmark','Djibouti','Dominica','Dominican Republic','East Timor','Ecuador','Egypt','El Salvador','Equatorial Guinea','Eritrea','Estonia','Ethiopia','Fiji','Finland','France','Gabon','The Gambia','Georgia','Germany','Ghana','Greece','Grenada','Guatemala','Guinea','Guinea-Bissau','Guyana','Haiti','Honduras','Hungary','Iceland','India','Indonesia','Iran','Iraq','Republic of Ireland','Israel','Italy','Jamaica','Japan','Jordan','Kazakhstan','Kenya','Kiribati','North Korea','South Korea','Kuwait','Kyrgyzstan','Laos','Latvia','Lebanon','Lesotho','Liberia','Libya','Liechtenstein','Lithuania','Luxembourg','Republic of Macedonia','Madagascar','Malawi','Malaysia','Maldives','Mali','Malta','Marshall Islands','Mauritania','Mauritius','Mexico','Federated States of Micronesia','Moldova','Monaco','Mongolia','Montenegro','Morocco','Mozambique','Namibia','Nauru','Nepal','Kingdom of the Netherlands','New Zealand','Nicaragua','Niger','Nigeria','Norway','Oman','Pakistan','Palau','State of Palestine','Panama','Papua New Guinea','Paraguay','Peru','Philippines','Poland','Portugal','Qatar','Romania','Russia','Rwanda','Saint Kitts and Nevis','Saint Lucia','Saint Vincent and the Grenadines','Samoa','San Marino','São Tomé and Príncipe','Saudi Arabia','Senegal','Serbia','Seychelles','Sierra Leone','Singapore','Slovakia','Slovenia','Solomon Islands','Somalia','South Africa','South Sudan','Spain','Sri Lanka','Sudan','Suriname','Swaziland','Sweden','Switzerland','Syria','Tajikistan','Tanzania','Thailand','Togo','Tonga','Trinidad and Tobago','Tunisia','Turkey','Turkmenistan','Tuvalu','Uganda','Ukraine','United Arab Emirates','United Kingdom','United States','Uruguay','Uzbekistan','Vanuatu','Vatican City','Venezuela','Vietnam','Yemen','Zambia','Zimbabwe']; @Injectable() export class Service { getCustomer() : Customer { return customer; } getCountries() { return countries; } }
// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular and DevExtreme here: // https://github.com/DevExpress/devextreme-angular/blob/master/README.md System.config({ transpiler: 'ts', typescriptOptions: { module: "commonjs", emitDecoratorMetadata: true, experimentalDecorators: true }, meta: { 'typescript': { "exports": "ts" } }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'ts': 'npm:plugin-typescript@7.0.6/lib/plugin.js', 'typescript': 'npm:typescript@2.2.2/lib/typescript.js', '@angular/core': 'npm:@angular/core@4.1.0/bundles/core.umd.js', '@angular/common': 'npm:@angular/common@4.1.0/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler@4.1.0/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser@4.1.0/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@4.1.0/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http@4.1.0/bundles/http.umd.js', '@angular/router': 'npm:@angular/router@4.1.0/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms@4.1.0/bundles/forms.umd.js', 'rxjs': 'npm:rxjs@5.3.1', 'devextreme': 'npm:devextreme@17.2', 'jquery': 'npm:jquery@3.1.1/dist/jquery.min.js', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'devextreme-angular': 'npm:devextreme-angular@17.2' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme-angular': { main: 'index.js', defaultExtension: 'js' } } });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.3/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.3/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/17.2.3/css/dx.light.css" /> <link rel="dx-theme" data-theme="android5.light" href="https://cdn3.devexpress.com/jslib/17.2.3/css/dx.android5.light.css" /> <link rel="dx-theme" data-theme="ios7.default" href="https://cdn3.devexpress.com/jslib/17.2.3/css/dx.ios7.default.css" /> <link rel="dx-theme" data-theme="win10.black" href="https://cdn3.devexpress.com/jslib/17.2.3/css/dx.win10.black.css" /> <link rel="dx-theme" data-theme="win10.white" href="https://cdn3.devexpress.com/jslib/17.2.3/css/dx.win10.white.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.6.25/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script> <script src="config.js"></script> <script> System.import('app').catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>