Mobx React Form Extend

Skill: mobx-react-form-extend

Mission

Guide the user through extending Form and Field classes in mobx-react-form to add custom behavior, props, and methods.

Use this skill when the user needs to:

• Extend the base Form class with custom logic
• Create custom Field classes with additional props/methods
• Apply custom Field classes to specific fields
• Override the makeField() method
• Use the classes or class field definition properties

Architecture

Form (extend for custom form behavior)
└── makeField() → returns Field instance
    ├── Field (default)
    ├── MyCustomField (generic extension)
    └── SpecificField (per-field extension)

Extend the Form Class

import { Form } from 'mobx-react-form';

class MyForm extends Form {
  setup() {
    return {
      fields: ['email', 'password'],
      // ...
    };
  }

  plugins() {
    return { dvr: dvr({ package: validatorjs }) };
  }

  // Custom method
  logValues() {
    console.log('Current values:', this.values());
  }

  // Custom getter
  get hasEmail() {
    return !!this.$('email')?.value;
  }
}

const form = new MyForm();
form.logValues();
console.log(form.hasEmail);

Extend the Field Class (Generic)

Apply a custom Field class to ALL fields:

import { Form, Field } from 'mobx-react-form';

class MyField extends Field {
  // Custom property
  customProp = 'default';

  // Custom method
  log() {
    console.log(`Field "${this.path}": ${this.value}`);
  }

  // Override existing method
  clear(deep = true, execHook = true) {
    console.log('Custom clear on', this.path);
    super.clear(deep, execHook);
  }

  // Custom computed getter
  get isLongValue() {
    return typeof this.value === 'string' && this.value.length > 10;
  }
}

class MyForm extends Form {
  makeField(props) {
    return new MyField(props);
  }
}

const form = new MyForm({ fields: { email: { value: 'test@test.com' } } });
form.$('email').log(); // "Field "email": test@test.com"
form.$('email').isLongValue; // false

Extend Specific Fields

Apply a custom Field class only to specific fields:

class CustomSelectField extends Field {
  dropDownOptions = ['Poor', 'Average', 'Excellent', 'Unsure'];

  get selectedOption() {
    return this.dropDownOptions[this.value] || this.value;
  }
}

class MyForm extends Form {
  makeField(props) {
    switch (props.key) {
      case 'rating':
        return new CustomSelectField(props);
      default:
        return new Field(props);
    }
  }
}

Extend Field in Field Definition

Unified mode — using class prop

class CustomSelectField extends Field {
  dropDownOptions = ['Poor', 'Average', 'Excellent'];
}

const form = new Form({
  fields: [
    {
      name: 'standardField',
      // will default to Field
    },
    {
      name: 'customField',
      class: CustomSelectField, // use custom class
    },
  ],
});

Separated mode — using classes object

const fields = [
  'standardField',
  'customField',
];

const classes = {
  customField: CustomSelectField,
};

const form = new Form({ fields, classes });

Combined: Form + Field Extension

import { Form, Field } from 'mobx-react-form';
import dvr from 'mobx-react-form/lib/validators/DVR';
import validatorjs from 'validatorjs';

// Custom field
class MyField extends Field {
  get maskedValue() {
    return this.type === 'password'
      ? '••••••••'
      : this.value;
  }

  clear(deep = true, execHook = true) {
    console.log(`Clearing ${this.path}`);
    super.clear(deep, execHook);
  }
}

// Custom form
class MyForm extends Form {
  makeField(props) {
    return new MyField(props);
  }

  plugins() {
    return { dvr: dvr({ package: validatorjs }) };
  }

  setup() {
    return {
      fields: {
        email: {
          label: 'Email',
          rules: 'required|email',
          value: 'test@test.com',
        },
        password: {
          label: 'Password',
          type: 'password',
          rules: 'required|min:6',
        },
      },
    };
  }

  // Validation hooks
  onSuccess(form) {
    console.log('Valid!', form.values());
  }
  onError(form) {
    console.log('Errors:', form.errors());
  }
}

const form = new MyForm();
console.log(form.$('password').maskedValue); // "••••••••"

Custom Field with Additional Methods

class SelectField extends Field {
  // Options for a select dropdown
  optionsList = [];

  get selectedLabel() {
    const option = this.optionsList.find(o => o.value === this.value);
    return option ? option.label : this.value;
  }

  setOptions(options) {
    this.optionsList = options;
  }
}

// Use in separated mode:
const classes = {
  country: SelectField,
};

// Then in the field definition:
const extra = {
  country: {
    options: [
      { value: 'us', label: 'United States' },
      { value: 'it', label: 'Italy' },
      { value: 'uk', label: 'United Kingdom' },
    ],
  },
};

// In component:
// form.$('country').selectedLabel // "United States"

Initialization Methods Available for Override

When extending Form, these methods can be overridden:

class MyForm extends Form {
  setup() { return { fields, values, labels, ... }; }
  options() { return { validateOnChange: true, ... }; }
  plugins() { return { dvr: dvr({ ... }) }; }
  bindings() { return { CustomBinding: ({ ... }) => ({ ... }) }; }
  hooks() { return { onInit(form) { ... }, ... }; }
  handlers() { return { onSubmit(e) { ... }, ... }; }
}

> Methods return objects that get merged with constructor-provided values.

Key Takeaways

1. Extend Field: Add custom props, methods, computed getters to all or specific fields.
2. makeField(): Override in Form to control Field instantiation.
3. class / classes: Assign custom Field classes in field definitions (no makeField() needed).
4. setup() method: Return fields configuration from the class instead of passing to constructor.
5. Initialization methods: setup(), options(), plugins(), bindings(), hooks(), handlers().
6. Merge behavior: Method return values merge with constructor arguments — both work together.

Related Skills

• [mobx-react-form-api](../mobx-react-form-api/SKILL.md) — Core API prerequisite
• [mobx-react-form-flat](../mobx-react-form-flat/SKILL.md) — Field definitions with class
• [mobx-react-form-nested](../mobx-react-form-nested/SKILL.md) — Nested fields
• [mobx-react-form-events](../mobx-react-form-events/SKILL.md) — Hooks and handlers extension

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: foxhound87
• Source: foxhound87/skills
• License: MIT

Install and usage instructions live in the source repository linked above.