score:1

Accepted answer

i talked to the creator of the vazco/uniforms, radosław miernik, and he said that there are two ways of solving it:

1) adding a button on the form, when it is clicked, triggers the function.

2) create a custom form to make it.

as i was looking for a solution to use only autoform, i noticed it was not possible. my solution was then to create a custom form with what i needed. so the solution is a custom form (based on autoform):

import clonedeep from 'lodash.clonedeep';
import isequal from 'lodash.isequal';
import set from 'lodash.set';
import {proptypes} from 'react';


import validatedquickform from 'uniforms-bootstrap3/validatedquickform';

const auto = parent => class custom extends parent {
    static auto = auto;
    static displayname = `auto${parent.displayname}`;

    static proptypes = {
        ...parent.proptypes,
        onchangemodel: proptypes.func
    };

    constructor() {
        super(...arguments);// eslint-disable-line

        this.state = {
            ...this.state,
            model: this.props.model,
            modelsync: this.props.model
        };
    }

    componentwillreceiveprops({model}) {
        super.componentwillreceiveprops(...arguments);// eslint-disable-line

        if (!isequal(this.props.model, model)) {
            this.setstate({model, modelsync: model});
        }
    }


    func() {
        // makes whatever i need
    }

    getnativeformprops() {
        const {
            onchangemodel, // eslint-disable-line no-unused-vars
            ...props
        } = super.getnativeformprops();

        return props;
    }

    getmodel(mode) {
        return mode === 'form' ? this.state.modelsync : this.state.model;
    }

    onchange(key, value) {
        this.setstate(state => ({modelsync: set(clonedeep(state.modelsync), key, value)}), () => {
            super.onchange(...arguments);// eslint-disable-line
            this.setstate({model: this.state.modelsync}, () => {
                if (this.props.onchangemodel) {
                    this.props.onchangemodel(this.state.model);
                }
            });
        });
    }

    onreset() {
        this.setstate(() => {
            super.onreset();

            return {
                model: this.props.model,
                modelsync: this.props.model
            };
        });
    }

    onsubmit(event) {
        if (event) {
            event.preventdefault();
            event.stoppropagation();
        }

        this.func(); // func that i wanted to call

        return new promise(resolve =>
            this.setstate({validate: true}, () =>
                resolve(this.onvalidate().then(
                    () => super.onsubmit()))
            )
        );
    }

    onvalidate() {
        return this.onvalidatemodel(this.getchildcontextmodel());
    }
};

export default auto(validatedquickform);

Related Query

More Query from same tag