redux-form how to show async validation success

Question

I have a change password form with redux-form and an async validation function.

How can I tell when the async validation successfully finished?

I am trying to get the fields data from props but I get undefined.

How can it be done?

function ChangePassword(props) {
  console.log(props);

  return (
    <div className="general-information-container ">
      <form className="relative general-information-form change-password-container">
        <div className="field-header">Genreal information</div>
        <Field
          name="currentPassword"
          component={renderField}
          type="password"
          placeholder="Enter you current password"
          label="Current Password"
        />
        <Field
          name="newPassword"
          component={renderField}
          type="password"
          label="New Password"
          placeholder="Enter New Password"
        />
        <Field
          name="confirmNewPassword"
          component={renderField}
          type="password"
          label="Confirm Password"
          placeholder="Confirm Password"
        />
        <button type="submit" className="edit-values">
          Change Password
        </button>
      </form>
    </div>
  );
}

export default reduxForm({
  form: "changePassword",
  asyncValidate: passwordAsyncValidate,
  asyncBlurFields: ["currentPassword"],

})(ChangePassword);

Thanks ????

DcoderZ DcoderZ · Accepted Answer · 2020-04-01T14:02:44

Here is a great example from the redux-form documentation.

https://codesandbox.io/s/nKlYo387

hope this helps.

redux-form how to show async validation success

1 Answers