@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;
}

Casting

FormData is always a Record<string,string>. This results in the need for casting in order to use non-string class-validator validations.

For Example:

❌ Won't work

class CastingModel {
 constructor(init:ExampleModel) {
     this.foo = init.foo;
 }
 
 @IsInt()
 foo:string
 
}

If we do not cast the entry FormData foo will always be a string meaning that it will never pass the @IsInt() validation.

✅ Will work:

class CastingModel {
 constructor(init:ExampleModel) {
  this.foo = Number(init.foo);
 }

 @IsInt()
 foo:number

}

Be careful when casting, any error in the constructor will be rethrown by the library as a ModelCreationError.

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 class-validator schema instead of validateSync. |