Install form builder

Installation

$ npm install @s-ui/react-form-builder --save

Usage

importFormBuilderfrom'@s-ui/react-form-builder'return(<FormBuilderjson={json}onChange={fields=>console.table(fields)}onBlur={onBlur}errors={errors}/>)

Form Builder API

• json: json that will build the form.
• onChange: method triggered on each change:
  • First argument: Dictionary like {fieldId1: value1, fieldId2: value2, ... , __FIELD_CHANGED__: fieldId}. FIELD_CHANGED key contains as value the last field that has changed its value.
• onBlur: method triggered on each on blur:
  • First argument: fieldId that has triggered the blur event.
• errors: Dictionary like {fieldId1: [error11, error12, ...], fieldId2: [error21, error22, ...]}.

Example Form Builder with validation

• It allows two types of validations;
  • checkConstrainstsFactory is a function exported by the form builder that returns the native errors of the form based on the constraints defined in each field in the json.
  • checkCustomConstraints is a invented function that allows to extend the validation of the form builder adding some validation outside the form.

importFormBuilder,{checkConstrainstsFactory}from'@s-ui/react-form-builder'constonBlur=fieldId=>{constcheckCustomConstraints=({fieldId, fieldValue})=>{if(fieldValue==='prohibit_word')return{[fieldId]: ['No puede contener palabras prohibidas']}}setErrors(prevErrors=>{// get errors derived from the constraints defined in jsonconstnewNativeErrors=checkConstrainstsFactory(JSONBuilder)({for: fieldId})// get errors not defined in the json ('custom')constnewCustomErrors=checkCustomConstraints({
fieldId,fieldValue: adFields[fieldId]})consterrors={
...prevErrors,
...newNativeErrors,
...newCustomErrors}// set errorsreturnerrors})}return(<FormBuilderjson={json}onBlur={onBlur}errors={errors}/>)