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
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)
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)
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.
Related articles you might find useful: