react-decorate-form v1.0.103
Table of Contents
Installation
- 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"],
}
Contribute
- 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
Documentation
See extended documentation on typescript-decorator-validation
Examples
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:
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago