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