使用redux-form验证React中动态生成的表单并重新验证?
我正在使用“ revalidate”来验证“ redux-
form”表单,但是我面对这种情况,其中存在一个基于我在其上映射并在表单内显示输入的API响应动态生成的表单。
这是我通常如何使用“重新验证…”验证“ redux表单”的示例
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);
现在,如何使用自动生成的表单执行类似的操作?
-
这个想法是让
dynamicFields
从ownProps
它是第二个参数validate
的功能,并请你来填充验证使用它们。由于
combineValidators
是一个高阶函数,因此在运行它后,我们用values
as参数调用结果函数。// 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
但您可以更具创造力,例如将a传递type
到动态字段数据并执行类似if type === ABC then do XYZ
此处提供了完整的验证代码和框->
https://codesandbox.io/embed/py5wqpjn40?fontsize=14