Extend Form & Field

• Extend Form & generic Field
• Extend specific custom Field
• Extend Field in Field Definition

Extend specific custom Field

Import the base Form and Field class:

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

or you can also import the base Form like this:

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

In this example, you can see how to extend a specific field:

class CustomSelectField extends Field {

  // for example we want to provide options values for the select input
  dropDownOptions = ['Poor', 'Average', 'Excellent', 'Unsure'];

  constructor(props) {
    super(props);

    // ...
  }
}

Into makeField() we have to match the field.key property with our sepcific field key/name.

class MyForm extends Form {

  makeField(props) {
    switch(props.key) {
      case 'mySelectField':
        return new CustomSelectField(props);
      default:
        return new Field(props);
    }
  }
}

then create the form instance using MyForm class:

export default new MyForm( ... );