Search results

Dynamic Form Validation in React DatePicker component

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.

  • For the dynamic forms, we can create a new React tsx called 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.

Source
Preview
data.tsx
dynamicform.tsx
index.tsx
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'));