使用redux-form验证动态生成的表单并重新验证? [英] Validate dynamically generated form in react using redux-form and revalidate?

问题描述

我正在使用revalidate"来验证redux-form"表单，但我面临的情况是，有一个基于 API 响应动态生成的表单，我映射它并在其中显示输入形式.

I'm using "revalidate" to validate "redux-form" forms, but I'm facing this situation where there's a form that is generated dynamically based on an API response that I map over it and display the inputs inside the form.

这是我通常如何使用revalidate ..."验证redux 表单"的示例

Here's an example of how I normally validate "redux forms" with "revalidate ...

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);

现在，我如何对自动生成的表单做类似的事情?

Now, how I go about doing a similar thing with the auto-generated forms?

推荐答案

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

The idea is to get the dynamicFields from the ownProps which is the second argument of the validate function and use them as you please to populate the validation.

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

Since combineValidators is an high order function, after running it we call the resulting function with values as parameter.

// 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

In this example I am just putting the isRequired but you can be more creative, e.g. passing a type to your dynamic field data and doing things like if type === ABC then do XYZ

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

A full codesandbox of the validation is provided here -> https://codesandbox.io/embed/py5wqpjn40?fontsize=14

这篇关于使用redux-form验证动态生成的表单并重新验证?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！