rc-mobx-form
Inspiration from rc-form
Depend on react, mobx and async-validator.
Why use this ?
- You are familiar with rc-form and want to use it with mobx.
- Many layers of nested form you want to manage fields together. ep. you can use store to manage nested form fields.
todo
- Support object path.
- Support default observer object in form.
- add doc.
- Support validateTrigger.
- remove ant-design dependency
- reduce example js size
example
Usage
npm i -S rc-mobx-form
// if you use ant-design // if not, you can implement FormItem instead of default FormItem (see implementation of /src/FormItem.js)
// below is almost same with rc-form, @observer is necessary@observer extend Component { e; thispropsform } { const getFieldProps = thispropsform return <Form onSubmit=thishandleSubmit> <FormItem hasFeedback> <Input ... placeholder="Input here" /> </FormItem> <Button type="primary" htmlType="submit">Submit</Button> </Form> } const WrappedForm = MyForm
you can also pass a store to WrappedForm
@observable nest = input: '' { // you can set options at here return 'nest.input': rules: required: true message: 'Please input something!' validateTrigger: 'onBlur' appendProps: placeholder: 'Input here' } // if you set the __options, the above MyForm's render() look like { const getFieldProps = thispropsform return <Form onSubmit=thishandleSubmit> <FormItem hasFeedback> <Input ... /> </FormItem> <Button type="primary" htmlType="submit">Submit</Button> </Form> } // and you need to pass store to WrappedForm
API
createForm(options)(FormComponent) : WrapForm
options
- store: you can also pass store here.
- prefix: common prefix path in store.
- defaultItemProps: default props assign to FormItem in this FormComponent.
- displayDefaultLabel: display the default label (passed name) in FormItem.
WrapForm's props
- store: you can pass store here.
- rootRef: ref of FormComponent
WrapForm's method
- validateFields(callback: Function) : Promise
- getFieldError(name) : Object
- getFieldsError() : Object
- getStore()
- getFieldProps(name, fieldOptions: Object)
fieldOptions
see ant-design's doc but something different:
- exclusive not supported
- add parseValue: Function, can be used to format value before set to component
- add appendProps: Object, for __options of store, this will assign to target component's props
FormItem
- disabledValidate, if need disable validateStatus