$ npm install @s-ui/react-form-builder --saveimport FormBuilder from '@s-ui/react-form-builder' return (<FormBuilder json={json} onChange={fields => console.table(fields)} onBlur={onBlur} errors={errors} />)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.
- First argument: Dictionary like
onBlur: method triggered on each on blur:- First argument:
fieldIdthat has triggered the blur event.
- First argument:
errors: Dictionary like{fieldId1: [error11, error12, ...], fieldId2: [error21, error22, ...]}.
- It allows two types of validations;
checkConstrainstsFactoryis 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.checkCustomConstraintsis a invented function that allows to extend the validation of the form builder adding some validation outside the form.
import FormBuilder, {checkConstrainstsFactory} from '@s-ui/react-form-builder' const onBlur = fieldId => { const checkCustomConstraints = ({fieldId, fieldValue}) => { if(fieldValue === 'prohibit_word') return {[fieldId]: ['No puede contener palabras prohibidas']} } setErrors(prevErrors => { // get errors derived from the constraints defined in json const newNativeErrors = checkConstrainstsFactory(JSONBuilder)({ for: fieldId }) // get errors not defined in the json ('custom') const newCustomErrors = checkCustomConstraints({ fieldId, fieldValue: adFields[fieldId] }) const errors = { ...prevErrors, ...newNativeErrors, ...newCustomErrors } // set errors return errors }) } return (<FormBuilder json={json} onBlur={onBlur} errors={errors} />)