RadDataForm Custom Validation
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 custom validation in
RadDataForm
.
Custom Validators
If the validators provided by
RadDataForm
don't fulfil your requirements you can create your own
validator. All you need to do, is create a class extending the
PropertyValidator
class and override its
validate
method. Here's a sample implementation that validates if the
input has an exact content:
Example 1: Create a custom validator
export class ExactTextValidator extends PropertyValidator {
constructor() {
super();
this.errorMessage = "Please enter: admin1";
}
public validate(value: any, propertyName: string): boolean {
return value.toLowerCase() === "admin1";
}
}
In order to use you validator, you can add it to your
html
just like the other validators:
Example 2: Use a custom validator in RadDataForm
<TKEntityProperty tkDataFormProperty name="username" index="0">
<ExactTextValidator tkEntityPropertyValidators></ExactTextValidator>
</TKEntityProperty>
Note that you will also need to import the custom validator and register it in order to be able to use it like the other validators:
Example 3: Import the custom validator
import { ExactTextValidator } from "../../data-services/exact-text-validator";
import { registerElement } from "nativescript-angular/element-registry";
registerElement("ExactTextValidator", () => <any>ExactTextValidator);
Figure 1: Using a custom validator to validate input for username on Android (left) and iOS (right)
Manual Validation
Another option is to manually notify
RadDataForm
for the validation state of its properties and not use the
validators at all. Here's an example that manually validates the
fields that require validation on a button tap and if they are
valid, commits them:
Example 4: Custom validation
public onTap() {
let isValid = true;
const p1 = this.myCustomDataFormComp.dataForm.getPropertyByName("username");
const p2 = this.myCustomDataFormComp.dataForm.getPropertyByName("password");
if (p1.valueCandidate.toLowerCase() !== "admin1") {
p1.errorMessage = "Use admin1 as username.";
this.myCustomDataFormComp.dataForm.notifyValidated("username", false);
isValid = false;
} else {
this.myCustomDataFormComp.dataForm.notifyValidated("username", true);
}
if (p2.valueCandidate.toLowerCase() !== "pass1") {
p2.errorMessage = "Use pass1 as password.";
this.myCustomDataFormComp.dataForm.notifyValidated("password", false);
isValid = false;
} else {
this.myCustomDataFormComp.dataForm.notifyValidated("password", true);
}
this._text = null;
if (!isValid) {
this._text = "Username and Password are not recognized.";
} else {
this._text = "";
this.myCustomDataFormComp.dataForm.commitAll();
alert(
{
title: "Successful Login",
message: "Welcome, " + this.myCustomDataFormComp.dataForm.source.username,
okButtonText: "OK"
});
}
}
Let's walk through that implementation. First, we are getting
each EntityProperty
that we want to validate. Then
we check their
valueCandidate
. After we check this value, we call
notifyValidated
with true
if the value is acceptable and with
false
otherwise. We are also setting the property's
errorMessage
to the text that we want to have displayed to inform the user
why validation has failed. Finally, if all properties are valid,
we
commit
the result and display a success message. Optionally, we show
another message in the case of the failed validation,
summarizing the validation errors.
Figure 2: Using a custom validation on button tap on Android (left) and iOS (right)
References
Want to see this scenario 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: