cannot clearErrors manually before onSubmit

[aryaniyaps]

while setting errors using the setError method, a ClearErrors method needs to be called somewhere in order to submit the form. (#4913)

however, I have a doubt and cannot figure out where to call this method.
But it has to be before the onSubmit method is called.

can someone please help me with this?

[JamesWong1999]

could you invoke clearErrors with input onChange?

[aryaniyaps]

Thanks for your response. I am yet to get my hands on the pc to try it,but it seems like it's good idea

[aryaniyaps]

// FormField
export const FormField = props => {
  // access context from FormProvider
  const { register, clearErrors, formState: { errors } } = useFormContext();
  const field_errors = get(errors, props.name);
  
  const handleChange = e => {
    console.log('clearing')
    clearErrors(e.target.value);
    console.log('cleared')
  }

  return (
    <div className="formField-wrapper">
      <div className="header">
        <label className={`label ${field_errors && 'errors'}`} htmlFor={props.name}>{props.label}</label>
        {field_errors && field_errors.type === 'server' &&
          <label className="error-msg errors">{field_errors.message}</label>}
      </div>
      <TextField
        register={register}
        variant={field_errors ? `${props.variant} errors` : props.variant}
        type={props.type}
        name={props.name}
        defaultValue={props.defaultValue}
        value={props.value}
        placeholder={props.placeholder}
        onChange={handleChange}
        maxLength={props.maxLength}
        spellCheck={false}
      />
    </div>
  )
}

the event handler is not firing though
@JamesWong1999

[bluebill1049]

so why not set an error to an existing registered input? wouldn't that be easier to deal with?

const { onChnage, ...rest } = register('test')

<input 
  onChange={(e) => {
    if (errors.customError) clearErrors(e.target.name);
    onChange(e); 
  }}
  ...rest
/>

[aryaniyaps]

@bluebill1049
yes that works, but as I have figured out, I need to clear all the errors for the whole form somehow before submitting.
This is because, right now, only the fields that have changed are cleared.

If some other errors exists, still the form wont submit.

[apedretti]

Commenting here out of curiosity. Aryan, from what I understand your form has some validation and then something happens and that validation is not needed anymore.

So you've got two alternatives:

• Have a dynamic validation.
• Clear the errors after that something happened and before submit.

I'm not a big fan of clearing the errors if you can avoid it, so I've made you an example of the second alternative: Conditional validation + useFormContext. Try using that form with the console open, so you'll see the order of events.

Would that alternative work for you?

[aryaniyaps]

thanks a lot!
I guess that I can carry on with this.
appreciate your time.

[bluebill1049]

Thank your for the solution.