使用 redux-form 验证动态生成的表单并重新验证？

Question

我正在使用 "revalidate" 来验证 "redux-form" 表单，但我遇到的情况是，有一个表单是根据我映射的 API 响应动态生成的在它上面并显示表单内的输入。

这是我通常如何使用“重新验证 ...

验证 "redux forms" 的示例

const validate = combineValidators({
    name: composeValidators(
        isRequired({ message: "Please enter your full name." }),
        hasLengthLessThan(255)({
            message: "Name can't exceed 255 characters."
        })
    )(),
    email: composeValidators(
        isRequired({ message: "Please enter your e-mail address." }),
        matchesPattern(IS_EMAIL)({
            message: "Please enter a valid e-mail address."
        })
    )()
});

export default compose(
    connect(
        null,
        actions
    ),
    reduxForm({ form: "signupForm", enableReinitialize: true, validate })
)(SignUpForm);

现在，我如何使用自动生成的表单做类似的事情？

Answer 1

想法是从 ownProps 中获取 dynamicFields，这是 validate 函数的第二个参数，并根据需要使用它们来填充验证。

由于combineValidators是一个高阶函数，在运行之后我们以values作为参数调用结果函数。

// assuming dynamicFields an array like:
[
    {
        id: 1,
        name: 'age',
        component: 'input',
        label: 'Age',
        placeholder: 'Age'
    },
    {
        id: 2,
        name: 'size',
        component: 'input',
        label: 'Size',
        placeholder: 'Size'
    }
]
///////

const validate = (values, ownProps) => {
const staticValidations = {
    firstname: composeValidators(
        isRequired({ message: 'Please enter the first name.' }),
        hasLengthLessThan(255)({
            message: "Name can't exceed 255 characters."
        })
    )(),
    lastname: composeValidators(
        isRequired({ message: 'Please enter the lastname' }),
        matchesPattern('abc')({
            message: 'Please enter a valid lastname'
        })
    )()
}
const dynamicValidations = ownProps.dynamicFields.reduce((accu, curr) => {
    accu[curr.name] = isRequired({ message: 'Please enter ' + curr.name })
    return accu
}, {})

return combineValidators({
    ...staticValidations,
    ...dynamicValidations
})(values)

}

在这个例子中我只是放了 isRequired 但你可以更有创意，例如将 type 传递给您的动态字段数据并执行 if type === ABC then do XYZ

之类的操作

此处提供了完整的验证代码和框 -> https://codesandbox.io/embed/py5wqpjn40?fontsize=14

使用 redux-form 验证动态生成的表单并重新验证？

Validate dynamically generated form in react using redux-form and revalidate?

reactjs

redux

react-redux

redux-form