RadDataForm Validation Events

If you followed the getting started section, you now know how to edit an object's properties with RadDataForm for NativeScript. From the validation overview you should have become acquainted with the validation feature in RadDataForm. This article will show you how to use the validation events in RadDataForm.

Overview
Validate
Validated
References

Overview

There are two validation events that you can use to get notified when a property in RadDataForm gets validated:

propertyValidate: This event is fired while the value is validating and allows you to interfere and change the validation result.
propertyValidated: This event is fired after the validation has finished and you can use it to check the final result from the validation.

Validate Property

The propertyValidate event gives you an opportunity to change the validation result through DataFormEventData of the method's event args, for example for custom validation. You can also use it for asynchronous validation by setting the validation result to a Promise which will be later resolved with the result from the validation.

Please note that if you are having validators, for some property the propertyValidate event will be fired for this property only if all validators are successful. If you want to be notified for failed validation, use the propertyValidated event.

The following example demonstrates how to use the propertyValidate event to validate whether two fields contain the same value (for example for confirming passwords or emails).

Example 1: Using propertyValidate event for matching fields

public onPropertyValidate(args) {
    let validationResult = true;

    if (args.propertyName === "password2") {
        const dataForm = args.object;
        const password1 = dataForm.getPropertyByName("password");
        const password2 = args.entityProperty;
        if (password1.valueCandidate !== password2.valueCandidate) {
            password2.errorMessage = "Passwords do not match.";
            validationResult = false;
        }
    }

    args.returnValue = validationResult;
}

Figure 1: Using `propertyValidate` event to check for matching passwords on Android (left) and iOS (right)

NativeScriptUI-DataForm-Validation-Events-Android

This next example shows how to set the validation result to a Promise and validate the input asynchronously (for example to check whether a selected username is already used).

Example 2: Using propertyValidate event to validate a field asynchronously

public onPropertyValidate(args) {
    if (args.propertyName === "username") {
        this._text = "Validating the username: " + args.entityProperty.valueCandidate + "\n";
        this._isBusy = true;
        args.returnValue = new Promise<Boolean>(resolve => {
            setTimeout(() => {
                if (this._evenValidation) {
                    args.entityProperty.errorMessage = "This username is already used.";
                    resolve(false);
                } else {
                    resolve(true);
                }
                this._isBusy = false;
                this._evenValidation = !this._evenValidation;
            }, 1500);
        });
    }
}

In this example, we are simulating a slow and (almost) random validation for a property with name username. Also our page contains an ActivityIndicator (named indicator) and a Label (named label) to show information to the user about the current validation state.

Figure 2: Using `propertyValidate` event to make async validation of username on Android (left) and iOS (right)

NativeScriptUI-DataForm-Validation-Async-Android

Validated Property

The propertyValidated event gives you an opportunity to get notified that a property is validated and check what is the result from the validation. Here's an example:

Example 3: Using propertyValidated event to check the result from validation

public onPropertyValidated(args) {
    if (args.propertyName === "username") {
        this._text = "Username: " + args.entityProperty.valueCandidate + " was validated.\nResult: " + args.entityProperty.isValid;
    }
}

References

Want to see these scenarios in action? Check our SDK examples for Angular repo on GitHub. You will find these and many other practical examples with NativeScript UI.

NativeScript Angular