Dynamic form can be very useful and more economical to create the forms based on JSON data and without need for adding/changing any code.
dynamic-form.tsx which is responsible for rendering a dynamic form based on the Json data.The following example demonstrates how to create the sign up form dynamically.
export const data = {
A_FirstName: {
floatLabelType: 'Auto',
key: 'FirstName',
label: 'First Name',
placeholder: 'First Name',
type: 'text',
validation: {
required: true
}
},
B_LastName: {
floatLabelType: 'Auto',
key: 'LastName',
label: 'Last Name',
placeholder: 'Last Name',
type: 'text',
validation: {
required: true
}
},
C_Email_ID: {
floatLabelType: 'Auto',
key: 'Email_ID',
label: 'Mail ID',
placeholder: 'Email',
type: 'email',
validation: {
required: true
}
},
D_Password: {
floatLabelType: 'Auto',
key: 'Password',
label: 'Password',
placeholder: 'Password',
type: 'password',
validation: {
required: true
}
},
E_DOB: {
floatLabelType: 'Auto',
key: 'DOB',
label: 'DOB',
placeholder: 'DOB',
type: 'date',
validation: {
required: true
},
width: '250px'
},
F_Accept: {
key: 'Accept',
label: 'Accept terms and conditions',
type: 'checkbox',
validation: {
required: true
}
},
G_Submit: {
key: 'Button',
type: 'submit'
},
};// import the Button component
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
// import the CheckBox component
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
// import the DatePicker component
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
// import the TextBox component
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
export default class DynamicForm extends React.Component {
constructor(props) {
super(props);
}
onSubmit() {
alert("Form submitted!!!");
}
renderStatus(element) {
switch (element.type) {
case 'date':
return <div>
<DatePickerComponent type={element.type} floatLabelType={element.floatLabelType} placeholder={element.placeholder} width={element.width}/>
</div>;
case 'checkbox':
return <div id="checkBox">
<CheckBoxComponent type={element.type} label={element.label}/>
</div>;
case 'submit':
return <ButtonComponent id={element.type} type={element.type}> Sign up </ButtonComponent>;
default:
return <div id="textValue">
<TextBoxComponent type={element.type} floatLabelType={element.floatLabelType} placeholder={element.placeholder}/>
</div>;
}
}
render() {
this.objectProps = this.props;
return (Object.keys(this.objectProps.dataObject).map((key, value) => {
return (<div key={key.toString()}>
<form onSubmit={this.onSubmit}>
{this.renderStatus(this.objectProps.dataObject[key])}
</form>
</div>);
}));
}
}import { data } from './data';
import DynamicForm from './dynamicform';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
constructor(props) {
super(props);
this.data = data;
}
render() {
return (<div className="wrap">
<div className="outerbox">
<div className="formValue">
<DynamicForm dataObject={data}/>
</div>
</div>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('element'));export const data = {
A_FirstName: {
floatLabelType: 'Auto',
key: 'FirstName',
label: 'First Name',
placeholder: 'First Name',
type: 'text',
validation: {
required: true
}
},
B_LastName: {
floatLabelType: 'Auto',
key: 'LastName',
label: 'Last Name',
placeholder: 'Last Name',
type: 'text',
validation: {
required: true
}
},
C_Email_ID: {
floatLabelType: 'Auto',
key: 'Email_ID',
label: 'Mail ID',
placeholder: 'Email',
type: 'email',
validation: {
required: true
}
},
D_Password: {
floatLabelType: 'Auto',
key: 'Password',
label: 'Password',
placeholder: 'Password',
type: 'password',
validation: {
required: true
}
},
E_DOB: {
floatLabelType: 'Auto',
key: 'DOB',
label: 'DOB',
placeholder: 'DOB',
type: 'date',
validation: {
required: true
},
width: '250px'
},
F_Accept: {
key: 'Accept',
label: 'Accept terms and conditions',
type: 'checkbox',
validation: {
required: true
}
},
G_Submit: {
key: 'Button',
type: 'submit'
},
}// import the Button component
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
// import the CheckBox component
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
// import the DatePicker component
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
// import the TextBox component
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
export default class DynamicForm extends React.Component<any, any> {
public objectProps: any;
constructor(props: any) {
super(props);
}
public onSubmit() {
alert("Form submitted!!!");
}
public renderStatus(element: any) {
switch (element.type) {
case 'date':
return <div>
<DatePickerComponent
type={element.type}
floatLabelType={element.floatLabelType}
placeholder={element.placeholder}
width={element.width} />
</div>
case 'checkbox':
return <div id = "checkBox">
<CheckBoxComponent
type={element.type}
label={element.label} />
</div>
case 'submit':
return <ButtonComponent id={element.type}
type={element.type}> Sign up </ButtonComponent>
default:
return <div id="textValue">
<TextBoxComponent
type={element.type}
floatLabelType={element.floatLabelType}
placeholder={element.placeholder} />
</div>
}
}
public render() {
this.objectProps = this.props;
return (
Object.keys(this.objectProps.dataObject).map((key, value) => {
return (
<div key={key.toString()}>
<form onSubmit={this.onSubmit} >
{ this.renderStatus(this.objectProps.dataObject[key]) }
</form>
</div>
);
})
)
}
}import { data } from './data';
import DynamicForm from './dynamicform';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component<{}, {}> {
public data : any;
constructor(props: any) {
super(props);
this.data = data;
}
public render() {
return (
<div className = "wrap">
<div className= "outerbox">
<div className = "formValue">
<DynamicForm dataObject = {data} />
</div>
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('element'));