Force "required" prop on a field depending on its form's rules

What

Allow “required” to be set in a rule’s definition instead of form attribute

Why

I’m auto generating my validation rules and would like to keep the validation defined in one place. Having to maintain the “required” attribute on inputs could get out of sync and require extra maintenance.

How

authorizationKey: {
            length: validation.isLengthBetween(8,14),
            oneNumber: validation.hasOneNumber,
            required: true <---
}

Keynotes

It would also be nice if it could maintain the same behavior as the attribute where the other rules for a field are not evaluated if the required rule is not met.

[kettanaito]

@T-Roth I’m glad I could help you.

If I may, there is a slightly lighter version of the same solution you’ve come up with:

const getRequiredProp = (formRules) => {
  return (fieldSelector) => {
    const fieldRules = formRules.getIn(fieldSelector)

    if (fieldRules) {
      const required = fieldRules.get('required')
      return typeof required === 'function'
        ? required()
        : required
    }

    return false
  }
}

const shouldForceRequired = (fieldRecord, context) => {
  const { formRules } = context.form

  return [
    ['type', fieldRecord.type],
    ['name', fieldRecord.name],
  ].some(getRequiredProp(formRules))
}

export default createField({
  ...fieldPresets.input,
  mapPropsToField: ({ fieldRecord, context }) => ({
    ...fieldRecord,
    required: shouldForceRequired(fieldRecord, context),
  })
})(Input)

---

I am confused why fieldRules returns the instance of ImmutableJS. I think if (fieldRules.get) check is redundant. However, it’s beneficial, since we can use deep key refs by .getIn() and omit unnecessary safety check.

[T-Roth]

Sorry I didn’t get back to you sooner, your suggestion is working. Thanks for the help.

This is what I quickly came up with in case someone else wants to go this route (typescript):

const isRequiredValue = (value: ()=>boolean) : boolean => {
    const isFunction = typeof(value) === "function"
    if(isFunction) {
        return value() === true;
    } 
    return false;
}

const getRequiredValue = (fieldRules: any) : boolean => {
    if(fieldRules !== undefined 
        && typeof(fieldRules.get) === "function"
        && fieldRules.get("required") !== undefined) {

        return isRequiredValue(fieldRules.get("required"))
    }
    return false;
}

const requiredThroughName = (formRules: any, fieldName: string) => {
    const nameRules = formRules.get("name");
    
    return getRequiredValue(nameRules.get(fieldName));
}

const requiredThroughType = (formRules: any, fieldType: string) => {
    const typeRules = formRules.get("type");
    return getRequiredValue(typeRules.get(fieldType));
}

const shouldForceRequired = (context:any, field: any) => {
    const formRules = context.form.formRules;
    
    const isRequired = (
         requiredThroughName(formRules, field.name)
        || requiredThroughType(formRules, field.type)
    );

    return isRequired
}
  
const fieldOptions = Object.assign({}, fieldPresets.input, {
    mapPropsToField: (args:any) => ({
        ...args.fieldRecord,
        required: shouldForceRequired(args.context, args.fieldRecord)
    })
})
  
export default createField(fieldOptions)(Input)