⭐ Class entity validations made easy with the help of @Decorators
⭐ Allows strict type checking when applying decorator validators
⭐ Works perfectly with existing TypeScript-first applications
- Install library dependency
npm install react-decorate-form
- Allow experimental decorators configuration in your
tsconfig.json.
This removes IDE errors which could pop-up
{
"compilerOptions": {
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
/* ... */
}
}- Add babel configuration to your
tsconfig.json.
This allows for type-safety checking
{
plugins: [
"babel-plugin-transform-typescript-metadata",
["@babel/plugin-proposal-decorators", { legacy: true }],
["@babel/plugin-proposal-class-properties", { loose: true }],
],
presets: ["@babel/preset-typescript"],
}- Open bash terminal
- Change directory to your desired position
- Prepare the environment using this command
bash <(curl -s https://raw.githubusercontent.com/brunotot/react-decorate-form/master/contribute/setup.sh)Expanded shell code:
#!/bin/bash
mkdir typescript-decorator-validation-dev
cd typescript-decorator-validation-dev
git clone https://github.com/brunotot/react-decorate-form.git
cd react-decorate-form
npm install
cd ../
git clone https://github.com/brunotot/react-decorate-form.git demo
cd demo
git checkout testing
npm install
cd ../
if command -v code; then
code .
fi- Commit and push changes to a local branch
- Open pull request
See extended documentation on typescript-decorator-validation
A basic TypeScript form can look something like
import { validators } from 'react-decorate-form';
export type UserFormFields = {
confirmPassword: string;
firstName: string;
lastName: string;
password: string;
url: string;
age: number;
};
export default class UserForm implements UserFormFields {
@validators.string.Size({ min: 5 })
@validators.string.NotEmpty()
firstName!: string;
@validators.string.NotEmpty()
lastName!: string;
@validators.string.NotEmpty()
@validators.string.Password()
password!: string;
confirmPassword!: string;
@validators.string.URL()
url!: string;
@validators.number.Range({ min: 18, max: 100 })
age!: number;
@validators.boolean.AssertTrue('Passwords must match')
get passwordsMatch(): boolean {
return this.password === this.confirmPassword;
}
}And with some styling we can display the form which can look something like:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent