fitsol-test
v0.0.19
Published
copyright By TST-technology
Downloads
1
Readme
Table of contents
Requirements
First, install the library below:
- Reactstrap:
yarn add reactstrap
ornpm i reactstrap
Installation
npm i tst-toolkit
or
yarn add tst-toolkit
How to use Form
Example Code
import * as React from "react";
import { FormView } from "tst-toolkit";
const FormComponent = () => {
const ArrayOfInputFields = [
{
Label: "Name",
input: {
id: "name",
type: "text",
required: false,
},
validation: (value) => value !== "",
containerClassName: "text",
errorMessage: "Please Enter First Name",
},
{
Label: "email",
input: {
id: "email",
type: "text",
required: false,
},
validation: "email",
containerClassName: "text",
errorMessage: "Please Enter Email",
},
{
Label: "Country",
input: {
id: "country",
type: "select",
required: false,
},
options:[
{
id: 0,
value: "1",
label: "One",
},
{
id: 1,
value: "2",
label: "Three",
},
]
containerClassName: "text",
}
];
return (
<FormView
formInputList={CORPORATE_MODAL}
onSubmit={(payload) => {
console.log(payload);
}}
/>
);
};
Form Props
| Prop | Type | Default value | Description |
| --------------- | --------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| formInputList
| Array of Object | [] | Using formInputList we can add and remove input fields in from |
| onSubmit
| Function | (value) => {} | OnSubmit function returns the value of form when form is submitted |
| defaultValue
| object | {} | Using defaultValue we can preset value of input field. to prefill data use keyID is fieldID as a key and value as per you need and add this key value pair into defaultValue object |
| isFormPayload
| boolean | false | If value is true will get response in fromData formate in onSubmit function's value parameter |
| targetForm
| boolean | false | If value is true will get response in event in onSubmit function's value parameter |
Example of default value props
import * as React from "react";
import { FormView } from "tst-toolkit";
const FormComponent = () => {
const ArrayOfInputFields = [
{
Label: "Name",
input: {
id: "name",
type: "text",
required: false,
},
validation: (value) => value !== "",
containerClassName: "text",
errorMessage: "Please Enter First Name",
},
{
Label: "email",
input: {
id: "email",
type: "text",
required: false,
},
validation: "email",
containerClassName: "text",
errorMessage: "Please Enter Email",
},
{
Label: "Country",
input: {
id: "country",
type: "select",
required: false,
},
options:[
{
id: 0,
value: "1",
label: "One",
},
{
id: 1,
value: "2",
label: "Three",
},
]
containerClassName: "text",
}
];
return (
<FormView
formInputList={CORPORATE_MODAL}
defaultValue={{ country: "2", name: "Daxesh Italiya" }}
onSubmit={(payload) => {
console.log(payload);
}}
/>
);
};
FormInputList props
Using FormInputList props we can customize below properties :
- Input container style : using
containerClassName
- Input style : using
className
ininput
object - Error Message : using
errorMessage
- All input properties : using
input
object we can apply all properties of input like id, name, required etc. - Input validation : suing
validation
method for notEmpty validation usevalidation='notEmpty'
for notEmpty validation usevalidation='email'
else rou can pass validation function which return boolean value like
{
...
validation: (value) => value !== "",
...
}