Skip to main content

useFormMethods

Get form methods only. Returns all form actions (change, reset, submit, validate) as effector events.

Import​

import { useFormMethods } from 'efx-forms/useFormMethods';

Signature​

function useFormMethods(formName?: string): {
  // Methods (effector events)
  change: EventCallable<IValuePayload>;
  erase: EventCallable<void>;
  reset: EventCallable<void>;
  resetField: EventCallable<string>;
  resetUntouched: EventCallable<string[]>;
  setActive: EventCallable<IBooleanPayload>;
  setValues: EventCallable<IRValues>;
  setErrors: EventCallable<IRErrors>;
  replaceErrors: EventCallable<IRErrors>;
  submit: Effect<ISubmitArgs, ISubmitResponseSuccess, ISubmitResponseError>;
  validate: EventCallable<IValidationParams>;
  
  // Config methods (effector events)
  setConfig: EventCallable<IFormConfig>;
  setFieldConfig: EventCallable<IFieldConfig>;
}

Parameters​

ParameterTypeRequiredDescription
formNamestringNoForm name. Auto-detected from context if not provided

Return Type​

Object containing form methods:

  • Events: change, erase, reset, resetField, resetUntouched, setActive, setValues, setErrors, replaceErrors, validate
  • Effect: submit
  • Config methods: setConfig, setFieldConfig (effector events)

Usage Example​

Custom Submit Button​

import { Form, Field } from 'efx-forms';
import { useFormMethods } from 'efx-forms/useFormMethods';

const CustomSubmit = () => {
  const { submit, reset } = useFormMethods();
  
  return (
    <div className="button-group">
      <button type="button" onClick={() => submit({})}>
        Submit Form
      </button>
      <button type="button" onClick={() => reset()}>
        Reset Form
      </button>
    </div>
  );
};

const MyForm = () => (
  <Form name="custom-form" onSubmit={console.log}>
    <Field name="name" Field={Input} label="Name" />
    <CustomSubmit />
  </Form>
);

Programmatic Field Updates​

import { Form, useFormMethods } from 'efx-forms';

const AutoFillButton = () => {
  const { change, setValues } = useFormMethods();
  
  const handleAutoFill = () => {
    // Set individual field
    change({ name: 'email', value: 'test@example.com' });
    
    // Or set multiple values at once
    setValues({
      name: 'John Doe',
      phone: '555-1234',
    });
  };
  
  return <button type="button" onClick={handleAutoFill}>Auto-Fill</button>;
};

External Form Control​

import { useFormMethods } from 'efx-forms/useFormMethods';

const ExternalControls = () => {
  const { submit, reset, validate } = useFormMethods('my-form');
  
  return (
    <div className="external-controls">
      <button onClick={() => validate({})}>Validate</button>
      <button onClick={() => submit({})}>Submit</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
};

Update Form Configuration​

import { Form, useFormMethods } from 'efx-forms';

const ConfigToggle = () => {
  const { setConfig } = useFormMethods();
  
  const toggleValidation = () => {
    setConfig({
      validateOn: 'blur', // or 'change', 'submit'
    });
  };
  
  return (
    <button type="button" onClick={toggleValidation}>
      Toggle Validation Mode
    </button>
  );
};

When to Use​

Use useFormMethods when you need:

  • Only form actions without state data
  • To trigger form operations programmatically
  • External form control components
  • Minimal re-renders (methods don't change)