Create a dynamic Form

[a-tonchev]

We need a Component which will receive the elements for building the form. The form will be build dynamically according the elements provided:

const elements = [
 { type: 'text', label: 'Name', defaultValue: '', placeholder: 'Your Name' , required: true },
 { type: 'number', label: 'Age', defaultValue: 18, placeholder: 'Your age here' },
 { type: 'textarea', label: 'Description', placeholder: 'Enter information about you here' },
  { type: 'checkbox', label: 'I Want advertising', defaultValue: false }
 { type: 'checkbox', label: 'I agree with the Terms', defaultValue: false, required: true }
];

<CustomForm onSubmit={data => console.log(data)} elements={elements} />

The result data should look like:

[
{ label: 'Name', value: 'Max Mustermann' },
{ label: 'Age', value: 27 },
{ label: 'Description', value: 'I like chips' },
{ label: 'I Want advertising', value: false  },
{ label: 'I agree with the Terms', value: true  }
]

For now - possible options would be text, textarea, number, checkbox,, the first three should be implemented with CustomTextfield.jsx, the checkbox with CustomCheckbox.jsx. Later on we will extend with Select and Radio

[rtp314]

I created the component already, and made a pull request.

32