LetsForm Helpers

Any changes to the the Form Schema will cause a re-render of the form reflecting the changes. Use the formHelper function to quickly apply changes to the form, for example

import LetsForm, { formHelper } from 'lets-form';
 
import MY_FROM from '/forms';
 
const MyFormView = () => {
  return (
    <LetsForm
      defaultValues={{
        // some initial values
      }}
      form={
        formHelper(MY_FORM)
          .disable('password')
          .hide('remember_me')
          .form()
      }
    />
  );
};

In this example, the helper library takes the form defined in MY_FORM and returns a new schema in which the field password is disabled and the field remember_me is hidden.

Variables passed to the form= parameters and objects returned by the helper library are to be considered immutable, <LetsForm> triggers a re-render only if a new instance is passed to the form= property, fore this reason any changes made to the MY_FORM variable after the form is rendered, don't trigger any changes.

Using formHelper will ensure that a new instance of the Form Schema is created keepinge the referential integrity of all unchanged fields (in order to improve performance).

Modify multiple fields with .map()

More complex Form Schema transformations can ben implemented with the .map() method, in the exaple below all input-text fields are changed to fullWidth=true:

import LetsForm, { formHelper } from 'lets-form';
 
import MY_FROM from '/forms';
 
const MyFormView = () => {
 
  return (
    <LetsForm
      defaultValues={{
        // some initial values
      }}
      form={
        formHelper(MY_FORM)
          .map(field => {
            if (field.component === 'input-text') {
              // return a new reference for the field with the fullWidth
              // property modified
              return {
                ... field,
                fullWidth: true
              };
            }
            // leave the field unchanged
            return field;
          })
          .form()
      }
    />
  );
};

Load external data into a dynamic form

A more complex use-case is when, for example, a field like a dropdown has to be populated asynchronously from an external endpoint.

import { useQuery } from '@apollo/client';
import LetsForm, { formHelper } from 'lets-form';
 
import MY_DYNAMIC_FORM from './my-dynamic-form.json';
 
const MyFormView = () => {
  const { loading, data } = useQuery(GRAPHQL_QUERY_FOR_MY_OPTIONS);  
 
  return (
    <LetsForm
      form={
        formHelper(MY_DYNAMIC_FORM)
          .skip(loading)
          .setField(
            'my_select', 
            {
              options: data?.my_options.map(option => ({ 
                value: optipon.value, 
                label: option.label 
              }))
            }
          )
          .form()
      }
      disabled={loading}
      // ... rest of LetsForm options
    />
  );
};

In this example MY_DYNAMIC_FORM is a Form Schema containing a select field my_select with and empty options field, which needs to be filled with the results of a GraphQL query GRAPHQL_QUERY_FOR_MY_OPTIONS.

The formHelper takes the original form schema and

1. skip all changes in case the query is still loading skip(loading)
2. changes the options value of the field my_select with an array of value/name object generated from the loaded query

Note the final .form() which returns the final value of the Form Schema at the end of the chain of changes and the disabled={loading} which keeps the entire form disabled while loading.

These methods are available in the formHelper