Angular ValidationGroup Validation Result

A group validation result.

import { DxValidationGroupTypes } from "devextreme-angular/ui/validation-group"
Type: DxValidationGroupTypes.dxValidationGroupResult

brokenRules

An array of the validation rules that failed.

Type:

Array<RequiredRule | NumericRule | RangeRule | StringLengthRule | CustomRule | CompareRule | PatternRule | EmailRule | AsyncRule>

This array contains broken rules from all Validators in the validation group.

The validation rules are checked in the following order:

  • All the sync rules are checked in the same order as in the validationRules array. If a sync rule is broken, no further checks are performed and the brokenRules array contains only this rule.

  • If the sync rules successfully pass the checks, all the async rules are checked simultaneously. If any async rule is broken, it is added to the brokenRules array with other broken async rules.

complete

A promise that is fulfilled when all async rules are validated.

Type:

Promise<dxValidationGroupResult> (jQuery or native)

This promise exists only when the status is "pending". Check the status before you attach callback functions to that promise.

In the following example, a button validates a group of editors with async rules. The status is checked in the onClick event handler:

jQuery
index.js
$(function() {
    const validationGroupName = "myValidationGroup"; 

    $("#textBox").dxTextBox({ ... })
        .dxValidator({
            validationGroup: validationGroupName,
            validationRules: [{ 
                type: "async", 
                validationCallback: function(params) {
                    // ...
                }
            }]
        });

    $("#dateBox").dxDateBox({ ... })
        .dxValidator({
            validationGroup: validationGroupName,
            validationRules: [{ 
                type: "async", 
                validationCallback: function(params) {
                    // ...
                }
            }]
        });

    $("#button").dxButton({
        text: "Submit",
        validationGroup: validationGroupName,
        onClick: function(e) {
            const res = e.validationGroup.validate(); 
            res.status === "pending" && res.complete.then((r) => {
                console.log(r.status);
            });
        }
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-text-box>
    <dx-validator
        [validationGroup]="validationGroupName">
            <dxi-validation-rule type="async" 
                [validationCallback]="validateAsync">
            </dxi-validation-rule>
    </dx-validator>
</dx-text-box>

<dx-date-box>
    <dx-validator
        [validationGroup]="validationGroupName">
            <dxi-validation-rule type="async" 
                [validationCallback]="validateAsync">
            </dxi-validation-rule>
    </dx-validator>
</dx-date-box>

<dx-button 
    text="Submit"
    [validationGroup]="validationGroupName"
    (onClick)="validateGroup($event)">
</dx-button>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    validationGroupName = "myValidationGroup";

    validateGroup(e) {
        const res = e.validationGroup.validate(); 
        res.status === "pending" && res.complete.then((r) => {
            console.log(r.status);
        });
    }

    validateAsync(params) {
        // ...
    }
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxValidatorModule,
         DxTextBoxModule,
         DxDateBoxModule,
         DxButtonModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxTextBoxModule,
        DxDateBoxModule,
        DxButtonModule,
        DxValidatorModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxTextBox>
        <DxValidator
            :validation-group="validationGroupName">
            <DxAsyncRule
                :validation-callback="validateAsync"
            />
        </DxValidator>
    </DxTextBox>

    <DxDateBox>
        <DxValidator
            :validation-group="validationGroupName">
            <DxAsyncRule
                :validation-callback="validateAsync"
            />
        </DxValidator>
    </DxDateBox>

    <DxButton
        text="Submit"
        :validation-group="validationGroupName"
        @click="validateGroup()"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxTextBox } from 'devextreme-vue/text-box';
import { DxDateBox } from 'devextreme-vue/date-box';
import { DxButton } from 'devextreme-vue/button';

import {
    DxValidator,
    DxAsyncRule
} from 'devextreme-vue/validator';

export default {
    components: {
        DxTextBox,
        DxDateBox,
        DxButton,
        DxValidator,
        DxAsyncRule
    },
    data() {
        return {
            validationGroupName: 'myValidationGroup'
        }
    },
    methods: {
        validateAsync(params) {
            // ...
        },
        validateGroup(e) {
            const res = e.validationGroup.validate(); 
            res.status === "pending" && res.complete.then((r) => {
                console.log(r.status);
            });
        }
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { TextBox } from 'devextreme-react/text-box';
import { DateBox } from 'devextreme-react/date-box';
import { Button } from 'devextreme-react/button';

import {
    Validator,
    AsyncRule
} from 'devextreme-react/validator';

const validationGroupName = "myValidationGroup";

const validateAsync = function(params) {
    // ...
};

const validateGroup = function(e) {
    const res = e.validationGroup.validate(); 
    res.status === "pending" && res.complete.then((r) => {
        console.log(r.status);
    });
};

class App extends React.Component {
    render() {
        return (
            <TextBox>
                <Validator
                    validationGroup={validationGroupName}>
                    <AsyncRule
                        validationCallback={validateAsync} />
                </Validator>
            </TextBox>

            <DateBox>
                <Validator
                    validationGroup={validationGroupName}>
                    <AsyncRule
                        validationCallback={validateAsync} />
                </Validator>
            </DateBox>

            <Button 
                text="Submit"
                validationGroup={validationGroupName}
                onClick={validateGroup} />
        );
    }
}
export default App;

isValid

Indicates whether all the rules checked for the group are satisfied.

Type:

Boolean

status

Indicates the validation status.

Type:

ValidationStatus

This property can have one of the following values:

  • "valid" - all validation checks passed
  • "pending" - there are pending (not fulfilled or rejected) async rules
  • "invalid" - all validation checks are completed, but there are broken rules

validators

Validator UI components included in the validated group.

Type:

Array<any>