Redux表单验证在加载时触发(UPDATE_SYNC_ERRORS)

时间:2017-06-05 10:15:37

标签: reactjs redux-form

所有必填字段在表单组件加载时由UPDATE_SYNC_ERRORS触发验证。我不认为这是一个错误我认为它是一个代码问题(因为它曾经工作 - 虽然我最近更新)

所以我的问题是 - 在这个阶段可能导致UPDATE_SYNC_ERRORS解雇的原因是什么?该字段也没有值(undefined)但仍然通过我的函数并触发错误为“必需”,就像触摸了一个字段一样。

export const required = value => value ? undefined : 'Required';

我可以额外检查例如:value && value !== undefined ? undefined : 'Required';但是当触摸textField时我没有收到错误。

任何想法如何调试而不完全剥离?干杯!

1 个答案:

答案 0 :(得分:1)

在最后一天,我也遇到了这个问题,并且很难找到任何合适的解决方案,但是通过在redux-form repo上合并了许多不同的问题,并且重新阅读了文档并在源头上偷看我有一些东西可以解决你的问题。差不多一年之后,但希望它可以帮到某人。

注意:因为它的“魔术”用注释表示,所以如果你的reduxForm的配置对象看起来不同,我就不会太在意了。

import { reduxForm, getFormValues, isDirty } from 'redux-form';

const formName = 'brilliantForm';

let MyForm = reduxForm({
    form: formName,
    enableReinitialize: true,
    asyncValidate,
    asyncBlurFields: [],
})(ComponentToWrap);

MyForm = connect(
    state => ({
        formValues: getFormValues(formName)(state),
        initialValues: {
            fieldOne: '',
            fieldTwo: '',
        },
        shouldValidate: () => isDirty(formName)(state), // This is the magic
    })
)(MyForm);

export default MyForm;

这里的要点是,如果你的表单有初始值,则redux-form将默认验证它们,除非你告诉它不要通过shouldValidate()。在表单被触及/互动后,isDirty selector可以快速将验证限制在

注意:截至7.1 shouldValidate()已被拆分并弃用,以支持shouldError()shouldWarn()