StandardExtensions

Defined in: extension.ts:17

Standard binding extensions for React form elements

Form will be extended with these methods.

Remarks

This interface exists for the sole purpose of documentation.

Members

bindCheckBox

bindCheckBox: RequiredConfig<T, typeof CheckBoxBinding>

Defined in: extension.ts:91

Bind the checkbox field to the form.

Example

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

---

bindInput

bindInput: RequiredConfig<T, typeof InputBinding>

Defined in: extension.ts:43

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

bindLabel: OptionalConfig<T, typeof LabelBinding>

Defined in: extension.ts:147

Bind the label to the form.

Example

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

---

bindRadioGroup

bindRadioGroup: <V>(fieldName: Name<T>, config: RadioGroupBinding.Config<V> & Config) => (option: V, config?: RadioGroupBinding.ButtonConfig) => object

Defined in: extension.ts:123

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.

Type Parameters

V

V extends RadioGroupBinding.Option

Parameters

fieldName

Name<T>

config

RadioGroupBinding.Config<V> & Config

Returns

(option, config?): object

Parameters

option

V

Option that the radio button stands for

config?

RadioGroupBinding.ButtonConfig

Returns

object

aria-errormessage

aria-errormessage: string | undefined

aria-invalid

aria-invalid: boolean | undefined

checked

checked: boolean

id

id: string | undefined

name

name: string

onChange

onChange: ChangeEventHandler<HTMLInputElement, HTMLInputElement>

onFocus

onFocus: FocusEventHandler<HTMLInputElement>

type

type: "radio" = "radio"

value

value: string

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

bindSelectBox: RequiredConfig<T, typeof SelectBoxBinding>

Defined in: extension.ts:76

Bind the select box field to the form.

Example

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

---

bindSubmitButton

bindSubmitButton: OptionalConfig<T, typeof SubmitButtonBinding>

Defined in: extension.ts:136

Bind the submit button to the form.

Example

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

---

bindTextArea

bindTextArea: RequiredConfig<T, typeof TextAreaBinding>

Defined in: extension.ts:59

Bind the textarea field to the form.

Example

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