With a simple higher-order component (HOC), you can get:
- The values of the inputs.
- The status of the form.
- Control of validations.
- Simple Form
- Advanced Form
- Field Generator Form
- Custom Fields Use of the getInput interface ({ name, value, onChange}). IMPORTANT: onChange parameter is an object with target and the value:
onChange({ target: { value } });
You can install with NPM: @jkr26/react-forms-builder-logic
npm i --save @jkr26/react-forms-builder-logic import { formWrapper, Form } from "@jkr26/react-forms-builder-logic"; class ExampleFormComponent extends React.Component { ... } export const ExampleForm = formWrapper(ExampleFormComponent); ... constructor(props) { super(props); this.setFields(); } setFields() { this.props.form.initForm({ name: { defaultValue: "asdasd", validators: [minStringValidator, maxStringValidator, isRequired] }, age: { defaultValue: "2017-06-01", validators: [isRequired] }, email: { defaultValue: "jesus-aaaaaa@gml.c", validators: [emailValidator, isRequired] }, repeatEmail: { validators: [equalValidatorEmail, isRequired] }, policyPrivacy: { defaultValue: true, validators: [isRequired] } }, true ); } ...initForm second param optional: true for validation fields in real time || [default] false only in submit state
Step 3: Do not forget, add to each of the fields of your html form your handler (props.form.getInput, props.form.getSelect, ...)
... render() { const { form } = this.props; return ( <div> <Form form={form}> Name: <input type="text" {...form.getInput("name")} /> Age: <input type="date" {...form.getInput("age")} /> Email: <input type="text" {...form.getInput("email")} /> Repeat email: <input type="text" {...form.getInput("repeatEmail")} /> Condiciones de privacidad: <input type="checkbox" {...form.getCheckbox("policyPrivacy")} /> <button>Submit</button> </Form> </div> ); } ... ... <Form form={form}> ... ... componentDidUpdate() { if (this.props.form.isValidAfterSubmit) { console.log("Send data:", this.props.form.values); } } ... ... render() { ... <Form form={form}> Name: <input type="text" {...form.getInput("name")} /> {form.getErrors("name").map(e => ( <span key={e} style={{ color: "red" }}> {e} </span> ))} Age: <input type="date" {...form.getInput("age")} /> {form.getErrors("age").map(e => ( <span key={e} style={{ color: "red" }}> {e} </span> ))} ...- You can also get all the errors, with props
props.form.errors.
... handleSubmit = e => { e.preventDefault(); (...) this.props.form.submit(); }; render() { ... <Form form={form}> Name: <input type="text" {...form.getInput("name")} /> {form.getErrors("name").map(e => ( <span key={e} style={{ color: "red" }}> {e} </span> ))} <button onClick={this.handleSubmit}> Submit </button> ...| function | params | description |
|---|---|---|
initForm() | { exampleFieldName: { defaultValue: "foo", validators: [Validator1, Validator2, ValidatorN ] } }, boolean | Add the init form fields, along with their default value and validations. The second parameter indicates validations in real time, by default false. Method used in the contructor() |
setFields() | { exampleFieldName: { defaultValue: "foo", validators: [Validator1, Validator2, ValidatorN ] } } | Add the form fields, along with their default value and validations. |
setValues() | { nameField1: "foo", nameField2: "var", nameFieldN: "test" } | Set values. The form must have the loading to false. |
clear() | no params | Set default values for errors, values and isValidAfterSubmit. |
getErrors() | nameField | Get the errors of a field. Returns an error array or an empty one. |
getInput() | nameField | Get input attributes. Only text, number and date. |
getSelect() | nameField | Get input attributes. Only for select. |
getCheckbox() | nameField | Get input attributes. Only for simple checkbox: true/false. |
getRadio() | "nameField" , "value" | Get input attributes. Only for radio type. |
getCheckboxMulti() | "nameField" , "value" | Get input attributes. Only for check with multiple options. |
| prop | types | default value | description |
|---|---|---|---|
errors | { elementKey: String[], ... } | {} | Errors by fields. |
values | { element: String, ... } | {} | Values by fields. |
isValidAfterSubmit | boolean | false | All fields comply with their validations. After submit(). |
isValid | boolean | false | All fields comply with their validations in real time. Example: <button style={{ backgroundColor: form.isValid ? "green" : "red" }}>Submit</button> |
init | boolean | true | false, when the form is ready. After initForm(). |
Although the philosophy is not to create components, for the best control of the form we had to create a Form component to guarantee the load cycles and the alerts of uncontrolled components when they change to controlled:
... <Form form={this.props.form}> ...The validation "isRequired" is included in the library.
Other examples of validation:
import { Validator } from "@jkr26/react-forms-builder-logic"; export const startWithJJ = new Validator(value => { const error = "The element must start with jj."; if (value && /^jj/.test(value)) { return false; } return error; }); export const maxStringValidator = new Validator(value => { const error = "The item must have less than 10 characters."; if (value && value.length < 10) { return false; } return error; }); export const emailValidator = new Validator(value => { const error = "Invalid email"; const emailPattern = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; if (value && emailPattern.test(String(value).toLowerCase())) { return false; } return error; }); export const equalValidatorEmail = new Validator((value, formFields) => { const error = "THE EMAIL DOES NOT MATCH."; if (value && value === formFields.email.value) { return false; } return error; });The validators work in a very simple way, as the first parameter they receive the value of the element and as a second parameter they receive all the values of the form, as an object: formFields = { name: "John", age: "33", email: "john@example.com", repeatEmail: "john" }
MIT License.