@saashub/conform-class-validator

Rationale

Add on to Conform that adds supports class-validator models. Created on top of discussion.

Enjoy.

Install

npm install @saashub/conform-class-validator

Usage

Defining validation classes

Define your validation class like in the classical class-validator model.

export class ExampleModel {
    constructor(init: ExampleModel) {
        this.foo = init.foo;
        this.bar = init.bar;
    }

    @Length(1, 5)
    foo: string;

    @IsNotEmpty()
    bar: string;
}

The only thing you need to make sure of is that the constructor accepts your model object and not a list of properties:

✅ Do:

constructor(init:ExampleModel)
{
    this.foo = init.foo;
    this.bar = init.bar;
}

❌ Don't:

constructor(foo:string, bar:string) {
    this.foo = foo;
    this.bar = bar;
}

Implementing Form validation

You can use it just like the Zod and Yup Conform validators:

import {parseWithClassValidator} from '@saashub/conform-class-validator';

import {useForm} from '@conform-to/react';

function Example() {

    const [form, fields] = useForm({

        onValidate({formData}) {

            return parseWithClassValidator(formData, {schema: ExampleModel});

        },

    });


    // ...

}

Parameters

Property	Required	Definition
`payload`	true	It could be either the FormData or URLSearchParams object depending on how the form is submitted.
`schema`	true	`class-validator` model
`async`	false	Set it to true if you want to parse the form data with validate method from the yup schema instead of validateSync.