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)

NativeScriptUI-DataForm-Validators-Custom-Android NativeScriptUI-DataForm-Validators-Custom-iOS

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() {
    var isValid = true;

    var p1 = this.myCustomDataFormComp.dataForm.getPropertyByName("username");
    var 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)

NativeScriptUI-DataForm-Validation-Custom-Android NativeScriptUI-DataForm-Validation-Custom-iOS

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: