React-jsonschema-form: Form errors are not updated/cleared after new formData are passed to the form

[jariwalabhavesh]

Prerequisites

• [x] I have read the documentation;

Description

Once i submit from then it is showing error with all control, but when i am click cancel button it is not clearing up error(It is clearing data), How to reset error on cancel button?

Ideally, I'm providing a sample JSFiddle demonstrating the issue.

Follow the step in provided fiddle to reproduce error

1. click on submit button
   
   
   
   • it will show you error of length for name field
   
   
2. Then click cancel
   
   
   
   • it will clear form data
     
     -But not clearing validation errors
   
   

Expected behavior

• On cancel or reset form, error should be also reset

Actual behavior

• It is not reseting error on reseting form,

Version

i am using "react-jsonschema-form": "^0.43.0"

[n1k0]

This is strange UX to me. Could you elaborate on the reasoning behind this Cancel feature only removing errors?

[jariwalabhavesh]

@n1k0:
I use cancel button to clear data, so user can fill data again but after apply validation i found that validation errors are not reseting with form reset?

It is also not reseting validation error on form submit as well, If you want i can also provide a fiddle from that as well?

Is this right approach to clear form data using cancel button?
Why form error not reseting, am i missing something in implementation?

[n1k0]

Why form error not reseting, am i missing something in implementation?

Oh I see. There's probably an issue here indeed.

[n1k0]

May be related to #482.

[knilink]

From what I can see so far, errors are internal state so there is no way to clear it except creating a new form instance by changing element key.

  constructor(props) {
    super(props);
    this.state = {
      key: Date.now(),  // initialize

```js
cancelFormClick() {
console.log("cancel click",this.state)
this.setState({
key: Date.now(), // update key if want to create a new instance
formData: {}
})
}

```jsx
  render() {
    let self = this;
    return (
      <div>
        <Form key={this.state.key/*specify element key*/} schema={self.state.schema} uiSchema={self.state.uiSchema} formData={self.state.formData} onSubmit={self.formSubmit}>

[jariwalabhavesh]

Yes, it is working for now (temporary work around)

Here is working fiddle : Working JSFiddle

@knilink: Thanks for providing hint.

[knilink]

I don't feel it's a bug. By just passing new formData, it's theoretically not possible to know whether users want to reinitialize the form or just trying to manipulate formData.
Some other features might be broken if this issue is fixed.
So I guess using the "key" property would be the best solution.

[glasserc]

I agree with @knilink that we can't tell what the user's intent is just from new formData, and even worse, in the presence of custom form validation, we can't really know how to update the errors without revalidating everything. I'm not an expert about React, so where did you find the trick about the key? All I could find was https://facebook.github.io/react/docs/lists-and-keys.html. If this is an officially-sanctioned way to reset a component, then I'm all for it, but otherwise I wish we had a more explicit way to do it.

Closing this bug in the meantime, absent a proposed fix!

[knight-of-design]

I think it would be nice to have the ability to clear the error message after the user changes the value of field but leave the error messages for any other field until the user changes those fields.

[zek0faws]

You just need to add "liveValidate='true'" to your form. => documentation