# Mobx React Form Extend

> Extend Form and Field classes for mobx-react-form — custom field classes, makeField(), generic and specific field extension, field definition classes.

- **Type:** Skill
- **Install:** `agentstack add skill-foxhound87-skills-mobx-react-form-extend`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [foxhound87](https://agentstack.voostack.com/s/foxhound87)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [foxhound87](https://github.com/foxhound87)
- **Source:** https://github.com/foxhound87/skills/tree/main/mobx-react-form-extend

## Install

```sh
agentstack add skill-foxhound87-skills-mobx-react-form-extend
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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

```javascript
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:

```javascript
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:

```javascript
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

```javascript
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

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

const classes = {
  customField: CustomSelectField,
};

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

## Combined: Form + Field Extension

```javascript
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

```javascript
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:

```javascript
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](https://github.com/foxhound87)
- **Source:** [foxhound87/skills](https://github.com/foxhound87/skills)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-foxhound87-skills-mobx-react-form-extend
- Seller: https://agentstack.voostack.com/s/foxhound87
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.