standardBindings

const standardBindings: object

Defined in: extension.ts:16

Standard bindings for React form elements, by the name of the method they add to Form

Importing @mobx-sentinel/react/extension adds the methods to every form with extendFormBinding(), and extends Form with their types.

Type Declaration

bindCheckBox

readonly bindCheckBox: typeof CheckBoxBinding = CheckBoxBinding

Bind the checkbox field to the form.

Example

<input
  {...form.bindCheckBox("boolean", {
    getter: () => model.boolean,
    setter: (v) => (model.boolean = v),
  })}
/>

bindInput

readonly bindInput: typeof InputBinding = InputBinding

Bind the input field to the form.

<input> except the following types: button, submit, reset, hidden, image, file, checkbox, and radio. For checkbox and radio, use bindCheckBox and bindRadioGroup respectively, and for <textarea>, use bindTextArea.

Example

<input
  {...form.bindInput("string", {
    getter: () => model.string,
    setter: (v) => (model.string = v),
  })}
/>

<input
  {...form.bindInput("number", {
    valueAs: "number", // also supports "date"
    getter: () => model.number,
    setter: (v) => (model.number = v),
  })}
/>

bindLabel

readonly bindLabel: typeof LabelBinding = LabelBinding

Bind the label to the form.

Example

<label {...form.bindLabel(["field1"])}>Label</label>
<label {...form.bindLabel(["field1", "field2"])}>Label</label>

bindRadioGroup

readonly bindRadioGroup: typeof RadioGroupBinding = RadioGroupBinding

Bind the radio group field to the form.

The type of the options is inferred from the getter, and the setter receives the option of the selected button. It returns a function that takes an option and returns the props of its radio button.

Example

const bind = form.bindRadioGroup("enum", {
  getter: () => model.enum,
  setter: (v) => (model.enum = v),
});

Object.values(SampleEnum).map((value) => (
  <input key={value} {...bind(value)} />
))

Or with renderRadioGroup from @mobx-sentinel/react:

renderRadioGroup({
  binding: form.bindRadioGroup("enum", {
    getter: () => model.enum,
    setter: (v) => (model.enum = v),
  }),
  options: Object.values(SampleEnum),
  renderOption: (value, bind) => <input {...bind()} />,
})

bindSelectBox

readonly bindSelectBox: typeof SelectBoxBinding = SelectBoxBinding

Bind the select box field to the form.

Example

<select
  {...form.bindSelectBox("single", {
    getter: () => model.code,
    setter: (v) => (model.code = v),
  })}
>
  ...
</select>

bindSubmitButton

readonly bindSubmitButton: typeof SubmitButtonBinding = SubmitButtonBinding

Bind the submit button to the form.

Example

<button {...form.bindSubmitButton()}>Submit</button>

bindTextArea

readonly bindTextArea: typeof TextAreaBinding = TextAreaBinding

Bind the textarea field to the form.

Example

<textarea
  rows={4}
  {...form.bindTextArea("string", {
    getter: () => model.string,
    setter: (v) => (model.string = v),
  })}
/>