Resetting the form after submission

[goa]

Hi! Thanks for the great work.

I can't seem to find a way to reset a form once it has been submitted.

I tried setting a new model in the state with empty values, but nothing changes.

export default class TestForm extends React.Component {
    constructor(props) {
        super(props);
        let model = new Model();
        this.state = {
            model: model
        }
    }

    handleSubmit(event, model) {
        event.preventDefault();
        // Do stuff to submit form data...
        this.reset();
    }

    reset() {
        // Set a new, empty model, to clear the form.
        this.setState({ model : new Model() });
    }

    render() {
        return (
            <Form for={this.state.model} schema={this.state.model.schema} 
                onSubmit={this.handleSubmit}>
                <Field name="field1" />
                <Field name="field2" />
                ...
                <Field name="fieldN" />
                <button>Submit</button>
            </Form>
        );
    }
}

I also tried getting a ref to the Form component and calling reset() on the actual form DOM element, but that didn't work either.

[pedsmoreira]

Hey goa.

Thanks for reaching out about this issue.

I consider this to be a bug. For now, you can use key={uniqueKeyHere} to force React to create a new instance of the Form. It's not ideal, but it should do the job until the next form-for version is released.

This is how your code would look like:

export default class TestForm extends React.Component {
    constructor(props) {
        super(props);
        let model = new Model();
        this.state = {
            model: model
        }

        this.modelCounter = 0;
    }

    handleSubmit(event, model) {
        event.preventDefault();
        // Do stuff to submit form data...
        this.reset();
    }

    reset() {
        // Set a new, empty model, to clear the form.
        this.modelCounter++;
        this.setState({ model : new Model() });
    }

    render() {
        return (
            <Form key={this.modelCounter} for={this.state.model} onSubmit={this.handleSubmit}>
                <Field name="field1" />
                <Field name="field2" />
                ...
                <Field name="fieldN" />
                <button>Submit</button>
            </Form>
        );
    }
}

I'll put this issue as a high priority on my list of things to do on form-for.

The issue will remain open until this gets fixed. If you have any other issues and/or suggestions regarding form-for, please let me know.

Note: You do not need to provide schema={this.state.model.schema} in this case. If schema is not provided, form-for assumes it should use the .schema property from the object provided to for={...}.

[goa]

Hi pedsmoreira :)

That is a good enough solution for now :)

Thanks for your help with this, as well as the note regarding schema.