Form settings

Form settings control various aspects of the content and behaviour at the form level. The available settings are listed below.

    formName: null, // String. Must be unique. Used as a namespace for things like input ID and 'for' attributes..
    novalidate: true, // Disable the browser's native validation feedback
    hideSubmitButton: false, // Boolean - hides the submit button if true
    submitButtonText: 'Submit', // String - text to show on the submit form button
    requestInFlightIcon: { componentClass: IconPlusComponent, props: {} }, // Object with { componentClass, props }.
    // `componentClass` is the imported class of the component to show on the submit form button.
    // `props` can be included to pass state or data to the component, accessible as {{@props}}.
    // `@changesetWebform is passed to the component.
    // Note that if null, an empty element will still appear on the submit button, with the class names defined for requestInFlightIcon. If false, the element will not appear on the submit button.
    addCloneButtonIconComponent: { componentClass: IconPlusComponent, props: {} }, // Object with { componentClass, props }.
    // `componentClass` is the imported class of the component to show on the submit form button.
    // `props` can be included to pass state or data to the component, accessible as {{@props}}.
    // `@changesetWebform, and @formField are passed to the component.
    clearFormButton: false, // Boolean - whether or not to show the button that will empty all fields.
    clearFormButtonText: 'Clear form', // String - text to show on the clear form button TODO implement
    resetFormButton: false, // Boolean - if true, a button is shown which call the changeset.rollback() method. See https://github.com/poteto/ember-changeset#rollback
    resetFormButtonText: 'Discard changes',
    submitAfterClear: false, // Boolean. If true submits, the form after the clear form button is clicked. An example use case is a filters form with a clear filters button, where the desired behaviour is to clear the form fields, and then submit the empty form to reset the filters.
    clearFormAfterSubmit: false, // Boolean or string - if true, all fields are reset to their defaults after a the form submitData returns successfully.
    submitButtonType: 'button', // String - the type of the submit button. Can be 'button' or 'submit'.
    attrsFromConfig: {
      classNames: {}, // Object - keys can correspond to those in the classNames settings. See /docs/configure-classnames
    },

Form level settings can be tweaked for each instance of a changesetWebform component, in the formSettings object at the root of your formSchema.

The only required setting is formName which must be unique from that of any other form rendered on th page. This is to avoid the browser error from attempting to add multiple elements to the DOM with the same ID.

import ChangesetWebform from 'react-changeset-webforms/src/components/ChangesetWebform.jsx';

const formSchema = {
  formSettings: {
    formName: 'Signup',
    submitButtonText: 'Sign up',
    clearFormAfterSubmit: true,
    resetFormButton: true,
    clearFormButton: true,
  },
  fields: [
    {
      fieldId: 'name',
      fieldLabel: 'Name',
      fieldType: 'input',
      showValidationWhenFocussed: true,
      validationRules: [
        {
          validationMethod: 'validatePresence',
          arguments: true,
        },
      ],
      inputType: 'text',
    },
    {
      fieldId: 'email',
      fieldLabel: 'Email',
      fieldType: 'input',
      validatesOn: ['$inherited', 'insertWithValue'],
      validationRules: [
        {
          validationMethod: 'validatePresence',
          arguments: true,
        },
        {
          validationMethod: 'validateFormat',
          arguments: { type: 'email' },
        },
      ],
      inputType: 'email',
    },
    {
      fieldId: 'recoveryEmail',
      fieldLabel: 'Recovery email',
      fieldType: 'input',
      validatesOn: ['$inherited', 'insertWithValue'],
      validationRules: [
        {
          validationMethod: 'validatePresence',
          arguments: true,
        },
        {
          validationMethod: 'validateFormat',
          arguments: { type: 'email' },
        },
      ],
      inputType: 'email',
    },
    {
      fieldId: 'password',
      fieldLabel: 'Password (Minimum 8 characters)',
      fieldType: 'input',
      validationRules: [
        {
          validationMethod: 'validatePresence',
          arguments: true,
        },
        {
          validationMethod: 'validateLength',
          arguments: { min: 8, max: 72 },
        },
      ],
      inputType: 'password',
    },
    {
      fieldId: 'acceptTerms',
      fieldType: 'radioButtonGroup',
      fieldLabel: 'Do you agree to the terms and conditions?',
      validationRules: [
        {
          validationMethod: 'validateInclusion',
          arguments: {
            list: ['true'],
            message: 'You must accept the terms to continue.',
          },
        },
      ],
      options: [
        {
          label: 'I agree',
          value: 'true',
        },
        {
          label: 'I do not agree',
          value: 'false',
        },
      ],
    },
    {
      fieldId: 'confirmHuman',
      fieldType: 'singleCheckbox',
      fieldLabel: 'Are you a human?',
      checkBoxLabel: 'Are you human',
      validationRules: [
        {
          validationMethod: 'validatePresence',
          arguments: {
            presence: true,
            message: 'Please confirm that you are not a robot.',
          },
        },
      ],
    },
    {
      fieldId: 'cookieConsent',
      fieldType: 'checkboxGroup',
      fieldLabel: 'Please select the cookies you consent to',
      validationRules: [
        {
          validationMethod: 'validateLength',
          arguments: {
            min: 2,
            allowNone: false,
            message: 'You must select at least two cookie consent options.',
          },
        },
      ],
      options: [
        {
          label: 'Essential',
          key: 'essential',
        },
        {
          label: 'Analytics',
          key: 'analytics',
        },
        {
          label: 'Marketing',
          key: 'marketing',
        },
      ],
    },
  ],
};

function submit() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, 500);
  });
}

export default function SignupForm() {
  return (
    <ChangesetWebform
      formSchema={formSchema}
      submitData={submit}
      data={{ email: 'tobias@bluthcompany.com', recoveryEmail: 'test' }}
    />
  );
}

import ChangesetWebform from 'react-changeset-webforms/src/components/ChangesetWebform.jsx';

const formSchema = {
  formSettings: {
    formName: 'clearAfterSubmitForm',
    clearFormAfterSubmit: true,
    submitButtonText: 'Create account',
    clearFormButton: true,
    resetFormButton: true,
  },
  fields: [
    {
      fieldId: 'name',
      fieldType: 'input',
      fieldLabel: 'Name',
    },
    {
      fieldId: 'email',
      fieldType: 'input',
      fieldLabel: 'email',
      defaultValue: 'test@email.com',
    },
  ],
};

function submit() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, 2000);
  });
}

export default function ClearAfterSubmitFormSchema() {
  return (
    <ChangesetWebform
      formSchema={formSchema}
      submitData={submit}
    />
  );
}