final-form / react-final-form

🏁 High performance subscription-based form state management for React
https://final-form.org/react
MIT License
7.39k stars 481 forks source link

After a Field get submitError, how to reset it ? #456

Open cizz3007 opened 5 years ago

cizz3007 commented 5 years ago

i'm not good at english. Thank you for your understanding.. the problem is after i submit a Form, Field will get meta.submitError then it's forever not changed. meta.submitError is forever..

how to submitError to be cleared when field is touched or blured??

i can't find a way to initiate a specific Field. of course form.reset() is clear, but i wan't to know just reset one specific field.

thanks for reading this..

cizz3007 commented 5 years ago

i fixed codes in final-form.js. now it's working as I wish. but it's baaaad idea i guess. but i don't have time (ㅠ_ㅠ).. so i appended this code inside of api.focus()

focus: function focus(name) {
      var field = state.fields[name];

      if (field && !field.active) {
        state.formState.active = name;
        field.active = true;
        field.visited = true;
        notifyFieldListeners();
        notifyFormListeners();
      }
     ///appended code block.
      if (state.formState.submitFailed && !state.formState.submitSucceeded) {
        state.formState.submitFailed = false;
        state.formState.submitSucceeded = false;
        delete state.formState.submitError;
        delete state.formState.submitErrors;
        delete state.formState.lastSubmittedValues;
      }

    },
alun-430 commented 5 years ago

You can use this:

import { Form, Field } from 'react-final-form'

let initialFormData = {
    name: {}
};

handleSubmit (){
    initialFormData = {
        name: {}
    };
}

const MyForm = () => (
  <Form
    onSubmit={onSubmit}
    validate={validate}
    initialValues={initialFormData}
    render={({ handleSubmit, pristine, invalid }) => (
      <form onSubmit={handleSubmit}>
        <h2>Simple Default Input</h2>
        <div>
          <label>First Name</label>
          <Field name="name" component="input" placeholder="Input you name" />
        </div>

        <button type="submit" disabled={pristine || invalid}>
          Submit
        </button>
      </form>
    )}
  />
)
megos commented 5 years ago

Try use meta.dirtySinceLastSubmit option?

https://final-form.org/docs/react-final-form/types/FieldRenderProps#metadirtysincelastsubmit