nws-dynamic-form
v1.0.8
Published
A React Dynamic Library for Form, Input
Downloads
26
Maintainers
Readme
nws-dynamic-form
Dynamic Form
This library helps you generate a simple Form with JSON input in React. Makes use of @mui/material to generate the styled input. The main purpose for creating this library is to deal with dynamic form problem. Dynamic form is a form whose input list can be changed for different purpose. By using this library, you can custom your form input list to json format without fixing it on the database.
Sponsored by
Installation
Use NPM to install the library.
$ npm install nws-dynamic-form
Usage
import { JSONForm } from 'nws-dynamic-form';
const testFormData = JSON.stringify({
label: 'Declaration',
formFields: [
{
id: 'mass_purity_uncertainty',
name: 'mass_purity_uncertainty',
label: '1. Is there any uncertainty about the mass purity?',
type: 'radio',
options: [
{
label: 'No',
value: 'no',
},
{
label: 'Yes',
value: 'yes',
},
],
},
{
id: 'mass_purity_uncertainty_explanation',
name: 'mass_purity_uncertainty_explanation',
label: 'Describe impurity',
display: { mass_purity_uncertainty: 'yes' },
multiline: true,
rows: 4,
variant: 'filled',
},
{
id: 'mass_origination',
name: 'mass_origination',
label: '2. Where the mass is originating from?',
type: 'checkbox',
options: [
{
name: 'road_originating',
label: 'Roads or railroads',
},
{
name: 'industy_originating',
label: 'Industrial, gas station, workshop or similar',
},
{
name: 'city_originating',
label: 'City area',
},
],
},
{
id: 'polution_completed',
name: 'polution_completed',
label: '3. Has the pollution analysis been completed?',
type: 'radio',
options: [
{
label: 'No',
value: 'no',
},
{
label: 'Yes',
value: 'yes',
},
],
},
{
id: 'polution_completed_explanation',
name: 'polution_completed_explanation',
label: 'Describe why not',
display: { polution_completed: 'no' },
multiline: true,
rows: 4,
variant: 'filled',
},
],
});
const defaultFormErrors = {
mass_purity_uncertainty: false,
mass_purity_uncertainty_explanation: false,
mass_origination: false,
polution_completed: false,
polution_completed_explanation: false,
}
function App() {
const [controlledFormValue, setControlledFormValue] = React.useState<any>({});
const [formErrors, setFormErrors] = React.useState({
mass_purity_uncertainty: false,
mass_purity_uncertainty_explanation: false,
mass_origination: false,
polution_completed: false,
polution_completed_explanation: false,
});
const onSubmit = (e: any) => {
if (!validateForm()) return;
console.log("Controlled form value: ", controlledFormValue);
}
const validateForm = () => {
let flag = true;
const newFormErrors = { ...defaultFormErrors };
if (!controlledFormValue?.mass_purity_uncertainty) {
newFormErrors.mass_purity_uncertainty = true;
flag = false;
}
if (!controlledFormValue?.mass_purity_uncertainty_explanation) {
newFormErrors.mass_purity_uncertainty_explanation = true;
flag = false;
}
if (!controlledFormValue?.mass_origination?.road_originating) {
newFormErrors.mass_origination = true;
flag = false;
}
if (!controlledFormValue?.mass_origination?.industy_originating) {
newFormErrors.mass_origination = true;
flag = false;
}
if (!controlledFormValue?.mass_origination?.city_originating) {
newFormErrors.mass_origination = true;
flag = false;
}
if (!controlledFormValue?.polution_completed) {
newFormErrors.polution_completed = true;
flag = false;
}
if (!controlledFormValue?.polution_completed_explanation) {
newFormErrors.polution_completed_explanation = true;
flag = false;
}
setFormErrors(newFormErrors);
return flag;
}
return (
<div className="App">
<div style={{ width: 500, padding: 20 }}>
<JSONForm
formData={testFormData}
formValue={controlledFormValue}
onChange={setControlledFormValue}
formErrors={formErrors}
/>
<button
style={{
marginTop: 10,
}}
onClick={onSubmit}
>
Submit
</button>
</div>
</div>
);
}