NativeScript Angular

RadDataForm Validation Modes

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 the different validation modes so you will be able to choose the one that fits best in your requirements.

You should have in mind that the validationMode property is dependent on the value of the commitMode property, meaning that RadDataForm will not let you commit property changes before you validate them. In other words:

  • If commitMode is Immediate, validation is also immediate disregaring the value of the validationMode property
  • If commitMode is OnLostFocus, validation is immediate, if validationMode is Immediate, or OnLostFocus otherwise
  • If commitMode is Manual, validation will follow the value of validationMode.

Immediate validation

This is the default validationMode in RadDataForm. When the validation is Immediate each field will be validated as soon as its value is changed.

Validation on Lost Focus

When the validation is OnLostFocus each field is validated when the focus moves to another editor. Since some editors (for example the Stepper) don't have a "focused state" their property changes will be validated immediately.

Manual Validation

When the validation is Manual, RadDataForm will not attempt to validate the current input automatically. Instead, you are expected to call some of the validation methods on a button tap for example.

In order to manually start the validation in RadDataForm you can use the methods validateAll or validateAndCommitAll. As their names imply, the difference between them is that if the validation is successful, the later will also commit the changes. Both methods return a Promise which will be resolved with a boolean value which is the result from the validation. Here's an example that demonstrates how to validate the input when a button is tapped and handle the result when its available:

Example 1: Using validateAll to manually validate changes

this.myValidateDataFormComp.dataForm.validateAll()
    .then(result => {
        this.updateTextWithResult(result);
    });

Another option for manual validation is to call the notifyValidated method to notify dataform that a field's value is or is not valid. More information about this approach is available on the custom validation article.

References

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

Related articles you might find useful: