https://github.com/francisconeves97/remix-form-class-validator
Simple helper to parse Remix FormData and validate it using class-validator.
https://github.com/francisconeves97/remix-form-class-validator
class-validator form form-validation remix validation
Last synced: 3 months ago
JSON representation
Simple helper to parse Remix FormData and validate it using class-validator.
- Host: GitHub
- URL: https://github.com/francisconeves97/remix-form-class-validator
- Owner: francisconeves97
- Created: 2022-03-23T20:58:17.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-04-03T21:21:59.000Z (about 4 years ago)
- Last Synced: 2025-09-14T17:14:44.728Z (7 months ago)
- Topics: class-validator, form, form-validation, remix, validation
- Language: TypeScript
- Homepage:
- Size: 186 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Remix form class-validator
Simple helper to parse [Remix](https://github.com/remix-run/remix/) `FormData` and validate them using `class-validator`.
## Features
- Server-side `FormData` **parsing and validation** using `class-validator`
- Provides **typesafe** access to parsed parameters and validation errors
- Support for arrays and nested attributes
## Usage
Start by defining the DTO class that will hold your parameters, and the respective validations using `class-validator`:
```tsx
class PersonDto {
@IsNotEmpty()
@MinLength(2)
name: string;
@Min(0)
@Max(150)
age: number;
}
```
Declare the route action and use `parseRequestParams` to parse and validate your parameters into your declared DTO:
```tsx
const action: ActionFunction = async ({ request }) => {
const params = await parseRequestParams(request, PersonDto);
if (params.errors) {
console.log("Form data is invalid", { errors: params.errors });
} else {
console.log("Form data is valid", { data: params.data });
}
return json(params);
};
```
Finally you just need to declare your form and use `useActionData` to access any errors resulting from validating your DTO.
```tsx
type ActionData = ParseRequestParamsReturn;
const SimpleForm = () => {
const actionData = useActionData();
return (
Submit
);
};
```
## Installation
To install simply run the following command:
```bash
$ npm install --save remix-form-class-validator
```
Because this library uses `class-transformer` [you will need to import](https://github.com/typestack/class-transformer#installation) the `reflect-metadata` shim.
On your `entry.server.tsx` file add the following import statement to import `reflect-metadata`:
```typescript
// entry.server.tsx
import "reflect-metadata";
```
### Configure Typescript
Because `class-validator` relies on annotations to perform validations, you should add the following to your `tsconfig.json`:
```js
{
// ...
"compilerOptions": {
// ...
"strictPropertyInitialization": false,
"experimentalDecorators": true
// ...
}
// ...
}
```
## Examples
You can check some example apps on the [examples](./examples) folder.