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

Question

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

某些重要的设计要求：

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

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

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

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

Answer 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}
    />
  )
}

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

Can I do multiple validations in a wizard type form?

validation

wizard

react-native

redux-form

react-native-flatlist