Steps for creating a personalized function for a specified custom rule within Aurelia Validation

Question

Steps for creating a personalized function for a specified custom rule within Aurelia Validation

I am currently utilizing aurelia-validation and have developed a custom rule.

Logic for Rule Validation:

export function validateCompare(value: any, obj: any, otherPropertyName: string) {
    return value === null ||
        value === undefined ||
        value === "" ||
        obj[otherPropertyName] === null ||
        obj[otherPropertyName] === undefined ||
        obj[otherPropertyName] === "" ||
        value === obj[otherPropertyName];
}

Configuration:

import { ValidationRules, validationMessages } from "aurelia-validation";
import { validateCompare } from "./compareValidation";

export function configureValidation() {
    validationMessages["required"] = "${$displayName} is required";
    validationMessages["email"] = "${$displayName} is in an invalid format";

    ValidationRules.customRule("compare", validateCompare, "${$displayName} does not match ${$getDisplayName($config.otherPropertyName)}", otherPropertyName => ({ otherPropertyName }));
}

Usage of the Custom Rule:

ValidationRules
    .ensure((m: ClienteEdicaoViewModel) => m.Login).required().satisfiesRule("login")
    .ensure((m: ClienteEdicaoViewModel) => m.Senha).satisfiesRule("requiredIf", "ConfirmacaoSenha").satisfiesRule("senha")
    .ensure((m: ClienteEdicaoViewModel) => m.ConfirmacaoSenha).displayName("Confirmation Password").satisfiesRule("requiredIf", "Senha").satisfiesRule("compare", "Senha")
    .on(ClienteEdicaoViewModel);

Inquiry:

I am working with typescript and would like to create a method that simplifies the use of the satisfiesRule. I want to apply rules as follows:

ValidationRules
    .ensure((m: ClienteEdicaoViewModel) => m.Login).required().login()
    .ensure((m: ClienteEdicaoViewModel) => m.Senha).requiredIf("ConfirmationPassword").password()
    .ensure((m: ClienteEdicaoViewModel) => m.ConfirmationPassword).displayName("Confirmation Password").requiredIf("Password").compare("Password")
    .on(ClienteEdicaoViewModel);

Is there a way to create the requiredIf and compare methods and incorporate them into the FluentRule?

C# has extension methods that could achieve this, but my attempts in TypeScript have been unsuccessful so far.

typescript aurelia

Answer 1

Answer №1

To enhance the validation module, you must extend the prototype with the necessary implementation. Below is an example of how your configuration should be set up.

import { ValidationRules, validationMessages, FluentRuleCustomizer, FluentRules } from "aurelia-validation";
import { validateCompare } from "./compareValidation";

export function configureValidation() {
    validationMessages["required"] = "${$displayName} is required";
    validationMessages["email"] = "${$displayName} is in an invalid format";

    ValidationRules.customRule("compare", validateCompare, "${$displayName} does not match ${$getDisplayName($config.otherPropertyName)}", otherPropertyName => ({ otherPropertyName }));
}

declare module "aurelia-validation/dist/commonjs/implementation/validation-rules" {
    interface FluentRules<TObject, TValue> {
        compare(value: string): FluentRuleCustomizer<TObject, TValue>;
    }

    interface FluentRuleCustomizer<TObject, TValue> {
        compare(value: string): FluentRuleCustomizer<TObject, TValue>;
    }
}

FluentRules.prototype.compare = function (value: string) {
    return this.satisfiesRule("compare", value);
};

FluentRuleCustomizer.prototype.compare = function (value: string) {
    return this.satisfiesRule("compare", value);
};

Answer 2

To enhance the validation module, you must extend the prototype with the necessary implementation. Below is an example of how your configuration should be set up.

import { ValidationRules, validationMessages, FluentRuleCustomizer, FluentRules } from "aurelia-validation";
import { validateCompare } from "./compareValidation";

export function configureValidation() {
    validationMessages["required"] = "${$displayName} is required";
    validationMessages["email"] = "${$displayName} is in an invalid format";

    ValidationRules.customRule("compare", validateCompare, "${$displayName} does not match ${$getDisplayName($config.otherPropertyName)}", otherPropertyName => ({ otherPropertyName }));
}

declare module "aurelia-validation/dist/commonjs/implementation/validation-rules" {
    interface FluentRules<TObject, TValue> {
        compare(value: string): FluentRuleCustomizer<TObject, TValue>;
    }

    interface FluentRuleCustomizer<TObject, TValue> {
        compare(value: string): FluentRuleCustomizer<TObject, TValue>;
    }
}

FluentRules.prototype.compare = function (value: string) {
    return this.satisfiesRule("compare", value);
};

FluentRuleCustomizer.prototype.compare = function (value: string) {
    return this.satisfiesRule("compare", value);
};

Steps for creating a personalized function for a specified custom rule within Aurelia Validation

Answer №1

Similar questions

Is it necessary to meticulously cycle through every value in the string combination?

Angular FormControl is a built-in class that belongs to the Angular forms module. It

Dependency injection in Angular is a powerful design pattern that

Encase a function with an observable

The axios GET request failed to return a defined value

Using TypeScript to Return a Derived Class as a Method's Return Type

Where should the API call be placed in the app.component to halt the system until the response is received and injected into the body, instead of using ngOnInit?

Organize JSON data in Angular 6 from an observable based on a specific key

How to remove the border of the MUI Select Component in React JS after it has been clicked on

The type '{ }' does not include the properties 'params', 'isExact', 'path', 'url' from the 'match<Identifiable>' type

Is there a way to manipulate the parent HTML element based on the output value sent to my component?

Tips for bringing in an enum from TypeScript?

Using agSelectCellEditor to populate Angular Grid dropdowns with values from a database

The primeng MenuItem component does not have a 'command' property and is of type 'never'

Angular: Discover the best way to delegate translation tasks to your S3 bucket!

Is there a distinction between Entity[] and array<Entity> in TypeScript?

Tips for managing errors when using .listen() in Express with Typescript

Receiving an error in Angular 7: Unable to retrieve value from child component as it is returning Undefined

What could be the reason for the esm loader not recognizing my import?

Retrieving Age from HTML5 Date Input in Angular 2+