当我导航到页面组件时 Redux-form 不验证

问题描述

我有这个 redux-form。如果我刷新页面，表单效果很好。它验证并显示错误消息。但是如果转到另一条路线并导航到我有表格的路线，即使表格为空，我也可以提交表格。

这是我的表格：

const validate = (values) => {
    const errors = {};
    if (!values.old_password) {
        errors.old_password = 'required';
    }
    if (!values.password) {
        errors.password = 'required';
    } else if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})/.test(values.password)) {
        errors.password =
            'Password should be at least eight characters,one uppercase letter and one number';
    }
    if (!values.confirm_password) {
        errors.confirm_password = 'required';
    } else if (
        values.password &&
        values.confirm_password &&
        values.password !== values.confirm_password
    ) {
        errors.confirm_password = 'Passwords do not match';
    }
    return errors;
};

const ChangePasswordForm = (props) => {
    const { handleSubmit } = props;
    return (
        <form
            className={styles.profileForm + ' ' + styles.changePasswordForm}
            onSubmit={handleSubmit}>
            <React.Fragment>
                <h4>Change Password</h4>
                <label>
                    <span>Old password</span>
                    <Field
                        name="old_password"
                        type="password"
                        label={'Old Password'}
                        component={RenderInput}
                    />
                </label>
                <label>
                    <span>Password</span>
                    <Field
                        name="password"
                        type="password"
                        label={'Password'}
                        component={RenderInput}
                    />
                </label>
                <label>
                    <span>Confirm password</span>
                    <Field
                        name="confirm_password"
                        type="password"
                        label={'Confirm Password'}
                        component={RenderInput}
                    />
                </label>
            </React.Fragment>

            <button className={'btn-primary'} type="submit">
                Save changes
            </button>
        </form>
    );
};
export default reduxForm({
    form: 'change-password-form',// <------ same form name
    validate
})(ChangePasswordForm);

好像当我导航到页面时它没有正确初始化，因为它不存在于组件 props.form 中。单击它在组件 props.form.change-password-form 中显示的任何输入后，但仍未验证，我可以使用不同的新密码提交表单并确认密码

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）