Form reset or prevent validation

[millerf]

Hi,

Thanks a lot for this library. It has been really helpful so far, but I found a caveat... Or at least I am not sure to go around it.

I am using availity to validate my inputs on a form. Once it is valid I send an ajax request and I reset the form. But I came upon a problem.

So far all my inputs have:

<AvField name="xxx" required value={this.state.xxx}></AvField>

So the only way I found to reset my form is to do a this.setState({xxx: ''})

But that triggers the validation submit and ends up my form having errors everywhere...

How would you reset the form 'properly'... I have been struggling with that for a while now...

Thanks a lot

[GoPro16]

You shouldn't be managing the fields via local state unless you have to. That is where this and formik libraries thrive is handling the state for you.

I would recommend 1 of 2 things:

1 - use the legacy context api to grab the values off the fields if you are wanting to do something with them before the form is submitted. ie. this.context.FormCtrl.getInput(inputName) 2 - use our new es6 @availity/form package that is built on top of formik. https://availity.github.io/availity-react/form/

[TheSharpieOne]

To reset the form, you can set key on AvForm to something else. This will cause react to create a new instance of AvForm, clearing the internal state.

[millerf]

@TheSharpieOne that's perfect!! Thanks!

[diegodesouza]

@TheSharpieOne is there an example of this somewhere?

[TheSharpieOne]

It's more of a hack way of reseting, but it's easy to implement (no need to get a ref or understand the internal workings of the components) https://stackblitz.com/edit/reactstrap-validation-v2-cl7jvy?file=Example.js