我可以在向导类型的表单中进行多次验证吗？答案

【问题标题】：Can I do multiple validations in a wizard type form?我可以在向导类型的表单中进行多次验证吗？
【发布时间】：2018-03-29 19:05:19
【问题描述】：

我正在使用 redux-form 包在 react-native 中构建一个类似向导的表单，但我没有像 example 那样有条件地渲染每个步骤。

某些重要的设计要求：

在每个包含多个字段的步骤都有效之前，继续按钮处于禁用状态。
我需要为每个步骤之间的过渡设置动画，并在其下方显示一个动画进度条。

到目前为止，我已将所有不同的步骤都内置到水平 FlatList 组件中并且它可以工作，但是，由于其他步骤的字段已呈现且尚未生效，我无法禁用每个步骤上的 Continue 按钮使用this.props.invalid 标志的步骤基础，这是我最初尝试做的。在示例中，每个步骤的提交按钮都已启用，它允许您提交表单并触发当前步骤的任何未决验证。

我的问题是：有没有办法对这些单独的字段进行分组并获得某种类型的更新道具以考虑步骤valid 或者我可以为每个步骤使用不同的表单名称，然后合并不同的步骤/提交最终表格时的表格？

感谢您对使用 redux-forms 进行此类设置的任何见解，谢谢！

【问题讨论】：

标签： validation react-native redux-form wizard react-native-flatlist

【解决方案1】：

我通过使用 redux 表单 getFormSyncErrors 选择器解决了我的问题。

import { 
  reduxForm,
  Field,
  getFormSyncErrors 
} from 'redux-form';

首先，您创建选择器，该选择器将添加一个 syncErrors 属性，其中包含当前未通过同步验证规则的字段数组。

Component = connect(
  state => ({
    syncErrors: getFormSyncErrors('formName')(state)
  })
)(Component);

然后在我的组件中，我比较当前步骤需要验证的字段，并检查它们是否存在于 syncErrors 数组中。如果当前步骤没有出现错误，Continue 按钮将被启用。

render(){
  const { syncErrors } = this.props;
  const fields = ['first_name', 'last_name', 'email'];
  const errorFields = syncErrors ? Object.keys(syncErrors) : [];
  const hasErrors = fields.some(el => errorFields.indexOf(el) >= 0);

  return(
    {...Fields}
    <ActionButton
      text='Continue'
      handleButtonPress={this.goToStep}
      disabled={this.props.pristine || hasErrors}
    />
  )
}

【讨论】：