small-forms-ts

Small Forms TS est une librairie de forms & validation inspirée du package PHP small/forms.
Elle apporte un système de formulaires typés, de validation, de transformation (modifiers),
ainsi qu'un support avancé pour DTOs via décorateurs et adaptateurs.

Ce package est conçu pour :

• Node
• SvelteKit
• Front-end TypeScript
• DTOs & mapping
• Interopérabilité small/type-dependency-injection

Installation

npm install small-forms-ts reflect-metadata

Ajoutez dans votre tsconfig.json :

{
  "experimentalDecorators": true,
  "emitDecoratorMetadata": true
}

Puis dans votre bootstrap :

import "reflect-metadata";

Quick Start

import {
  FormBuilder,
  StringType,
  NumberType,
  ValidateRequired,
  ValidateEmail,
  TrimModifier
} from "small-forms-ts";

const form = FormBuilder.create()
  .addField("email", new StringType(), [
    new ValidateRequired(),
    new ValidateEmail()
  ], [
    new TrimModifier()
  ])
  .addField("age", new NumberType())
  .getForm();

form.fill({ email: "  [email protected] ", age: "33" });

form.validate();

console.log(form.toObject());

FormBuilder

FormBuilder.create()
  .addField("name", new StringType())
  .addField("age", new NumberType())
  .getForm();

Types

• StringType
• NumberType
• BooleanType
• DateType

Rules (Validators)

Tous les validateurs implémentent :

interface Rule {
  validate(value: unknown, data?: Record<string, unknown>): string | null;
}

Listes des ValidateXXX :

ValidateAtLeastOneOf
ValidateBoolean
ValidateCallback
ValidateChoice
ValidateCountLessOrEqualThan
ValidateCountGreaterThan
ValidateCountLessThan
ValidateDateTime
ValidateDecimal
ValidateDivisibleBy
ValidateEmail
ValidateString
ValidateStringArray
ValidateUnique
ValidateEmpty
ValidateEqual
ValidateFloat
ValidateFloatArray
ValidateGreater
ValidateGreaterOrEqual
ValidateInt
ValidateIntArray
ValidateIsFalse
ValidateIsNull
ValidateIsTrue
ValidateJson
ValidateLess
ValidateLessOrEqual
ValidateMatchRegex
ValidateMixedArray
ValidateNegativeNumber
ValidateNotEmpty
ValidateNotEqual
ValidateNotMatchRegex
ValidateNotNull
ValidateNumberCharsBetween
ValidateNumberCharLessThan
ValidatePositiveNumber
ValidateRange
ValidateRequired
ValidateSequencialy
ValidateInteger

Modifiers

Tous implémentent :

interface Modifier {
  apply(value: unknown): unknown;
}

Modifiers inclus :

ExplodeModifier
FalseIfEmptyModifier
FormBooleanToPhpModifier
ImplodeModifier
LTrimModifier
NullIfEmptyModifier
RoundModifier
RTrimModifier
StringToDateTimeImmutableModifier
StringToDateTimeModifier
SubStrModifier
ToLowerModifier
ToUpperModifier
TrimModifier
UcFirstModifier
UcWordsModifier

Décorateurs

class UserDTO {
  @FormField(new StringType(), { rules: [new ValidateRequired()] })
  name!: string;

  @FormField(new NumberType())
  age!: number;
}

Adapters

ClassAdapter

const form = ClassAdapter.from(UserDTO);
form.fill(dto);
form.validate();

ObjectAdapter

const form = ObjectAdapter.fromObject({ name: "seb", age: 33 });

Intégration SvelteKit

export const actions = {
  default: async ({ request }) => {
    const data = Object.fromEntries(await request.formData());
    const form = ObjectAdapter.fromObject(data);

    try {
      form.validate();
      return { success: true };
    } catch (e) {
      return fail(400, { errors: e.errors });
    }
  }
};

Intégration API Node

app.post("/login", (req, res) => {
  const form = ObjectAdapter.fromObject(req.body);

  try {
    form.validate();
    res.json(form.toObject());
  } catch (e) {
    res.status(400).json(e.errors);
  }
});

Licence

MIT — Sébastien Kus
https://small-project.dev