Add dynamic rules validations to dynamic form

I want to generate a dynamic forms with dynamic validations.

For example : fields description and check rules are stored on a array like this

const sellingFormFieldDescription = [
                {key: 'state',
                 type: 'shared',
                 checkRules: {
                       maxLength: 255,
                       mandatory: true,
                 } },
                {
                key: 'sellingPrice',
                label: 'Price',
                type: 'decimal',
                checkRules: {
                    minValue: 1,
                    maxValue: 10000,
                    maxLength: 10,
                    mandatory: true,
                }]

With this array I want to generate two fields ( state and price ) on a form with validation rules. For sellingPrice field I need to check if the user has filled the value, and the value between 1 and 10000 and length not > 10) How I can do this ?

My code :

render() {
   { sellingFormFieldDescription.map((field,i) =>
                    if(field.type === 'shared' ){
                         return <Field name={field.key} key={i} component={renderSelect} />
                    } else if (field.type === 'decimal') {
                          return <Field name={field.key} key={i} component={renderField}  />
                    });
}}

const validate = formProps => {
    const errors = {}
    return errors
}

SellingFormFast = reduxForm({
    form: 'sellling_form_fast',  // a unique identifier for this form
    validate

})(SellingFormFast)

[kevinzwhuang]

I think Field-level validations might work well for you, given your modular approach. Instead of handling every case in the validate option for reduxForm, this will allow you to selectively validate based on what options you provide from your sellingFormFieldDescription object.

You can read more about this here: http://redux-form.com/6.4.3/examples/fieldLevelValidation/

Basically what you can do is compose an array of validation rules for your field in the validate prop for Field. So one of your Field’s might look like:

const maxValue = max => value =>
  value && value > max && `Must be greater than ${ max }` || undefined;
const maxLength = max => value =>
  value && value.length > max && `Must be longer than ${ max }` || undefined;
//......
return <Field {...otherMainFieldProps} validate={[maxValue(5), maxLength(10)]} />

Another improvement on this for your use case might be instead of explicitly declaring which rules are applied to the field, applying them based on the checkRules object of your items in sellingFormFieldDescription.

Here’s an improved example that’s slightly more complicated than the simple example in the documentation, but it might suit your needs better:

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { renderSelect, renderField } from 'somewhereElseInYourApp';

const sellingFormFieldDescription = [
// ! Important !
// the checkRules keys will be the same name as the rules functions we define below!
  {
    key: 'state',
    type: 'shared',
    checkRules: {
      maxLength: 255,
      mandatory: true,
    } },
  {
    key: 'sellingPrice',
    label: 'Price',
    type: 'decimal',
    checkRules: {
      minValue: 1,
      maxValue: 10000,
      maxLength: 10,
      mandatory: true,
    }
  }
]

// Compose your field-level validations the way you want to here:
// For a basic example, go to
// http://redux-form.com/6.4.3/examples/fieldLevelValidation/
const minValue = min => value =>
  value && value > min && `Must be greater than ${ min }` || undefined;
const maxValue = max => value =>
  value && value > max && `Must be greater than ${ max }` || undefined;
const maxLength = max => value =>
  value && value.length > max && `Must be longer than ${ max }` || undefined;
const mandatory = isMandatory => value =>
  isMandatory && value && undefined || 'Mandatory';

const rules = { minValue, maxValue, maxLength, mandatory };

const applyRules = checkRules => {
  let validations = [];
  for(let ruleName in checkRules) {
    let ruleFunc = rules[ruleName]
    // check if there is a valid validation function for this rule name
    if(ruleFunc) {
      // Push the generated validation to the field-level validations array
      validations.push(ruleFunc(checkRules[ruleName]))
    }
  }
  return validations;
}


class SellingFormFast extends Component {
  render() {
    { sellingFormFieldDescription.map((field,i) => {
      const validate = applyRules(field.checkRules);
      if(field.type === 'shared' ){
        return <Field name={field.key} key={i} component={renderSelect} validate={validate} />
      } else if (field.type === 'decimal') {
        return <Field name={field.key} key={i} component={renderField} validate={validate}/>
      }});
    }
  }
}

export default reduxForm({form: 'sellling_form_fast'})(SellingFormFast)

Let me know if this helps or if you have any questions @KrifaYounes

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.