form-for
form-for copied to clipboard
Resetting the form after submission
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.
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={...}
.
Hi pedsmoreira :)
That is a good enough solution for now :)
Thanks for your help with this, as well as the note regarding schema
.