Topic: clearError is not working with custom errors

mincom free asked 3 years ago


Expected behavior

after calling clearError all errors should disappear

Actual behavior

Input still has class is-invalid so error is shown

Resources (screenshots, code snippets etc.)

function Basic({ t }) {
  const [login, { data, loading, error }] = useMutation(LOGIN_MUTATION);
  const { handleSubmit, register, errors, setError, clearError } = useForm();
  const handleChange = e => {
    e.persist();
    clearError(e.target.name);
    e.target.classList.remove('is-invalid');
  };
  const onSubmit = values => {
    login({
      variables: { username: values.username, password: values.password }
    }).then();
  };
  if (data) {
    switch (data.login.__typename) {
      case 'ResultError':
        setError('username', 'noMatch', 'Login wrong');
        break;
      case 'LoginResultSuccess':
        break;
    }
  }
  return (
    <section>
      <MDBCard narrow className="mb-5">
        <MDBCardImage
          className="view view-cascade gradient-card-header blue-gradient"
          cascade
          tag="div"
        >
          <h2 className="h2-responsive mb-2">{t('headline')}</h2>
        </MDBCardImage>
        <MDBCardBody cascade>
          <form
            className="needs-validation"
            onSubmit={handleSubmit(onSubmit)}
            noValidate
          >
            <MDBRow center>
              <MDBCol md="4">
                <MDBInput
                  // @ts-ignore
                  inputRef={register({ required: t('form:required') })}
                  name="username"
                  icon=""
                  iconClass=""
                  iconRegular
                  type="text"
                  onChange={handleChange}
                  label="Type your username"
                  className={errors.username ? 'is-invalid' : ''}
                >
                  <div
                    className="invalid-feedback"
                    style={{ paddingLeft: '2.5rem' }}
                  >
                    {errors.username && errors.username.message}
                  </div>
                  <div
                    className="valid-feedback"
                    style={{ paddingLeft: '2.5rem' }}
                  >
                    Looks good!
                  </div>
                </MDBInput>
              </MDBCol>
              <MDBCol md="4">
                <MDBInput
                  // @ts-ignore
                  inputRef={register({ required: t('form:required') })}
                  name="password"
                  icon="lock"
                  type="password"
                  label="Type your password"
                  className={errors.password ? 'is-invalid' : ''}
                >
                  <div
                    className="invalid-feedback"
                    style={{ paddingLeft: '2.5rem' }}
                  >
                    {errors.password && errors.password.message}
                  </div>
                  <div
                    className="valid-feedback"
                    style={{ paddingLeft: '2.5rem' }}
                  >
                    Looks good!
                  </div>
                </MDBInput>
              </MDBCol>
              <MDBCol middle md="2">
                <MDBBtn
                  className="text-center"
                  type="submit"
                  disabled={loading}
                >
                  Login
                </MDBBtn>
              </MDBCol>
            </MDBRow>
          </form>
        </MDBCardBody>
      </MDBCard>
    </section>
  );
}

export default withTranslation(['login', 'form'])(Basic);

Jakub Chmura staff answered 3 years ago


Hi @mincom,

We are sorry but we don't have any clearError prop. I see that clearError method comes from external form plugin. Unfortunately, I can't check what's wrong with this form and why it won't work because this plugin you use is not part of the MDB React product.

I can add a task to our board to check in the future that we could make our validation compatible with this.

If there is anything else I could do for you do not hesitate to ask me. I'll be happy to help you.

Best Regards,

Kuba


mincom free commented 3 years ago

Saw this, sorry for raising this issue here :-)



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.22.0
  • Device: Laptop
  • Browser: Chrome latest
  • OS: Win 10 Debian WSL
  • Provided sample code: No
  • Provided link: No