Redux 表单 - 如何将字段设置为触摸

Question

我正在处理由多个页面组成的表单，我想解决验证问题。

当我点击提交按钮时，当前页面上的所有字段都在下方显示错误消息，但如果我更改页面，则我需要再次点击提交，因为这些字段未设置为触摸。

如果我可以将页面上的所有字段设置为触摸，一旦表单具有标志 anyTouched: true。

，我的问题就会得到解决

我正在使用 redux-form: '^6.0.0-rc.4' 并且我有一个容器，其中包含 redux-form 和多个由字段组成的组件。

Answer 1

我应该看起来更好：

Redux 形式 returns touch 作为组件的 prop。该函数将字段名称作为参数，因此我将在 submitFailed 更改时检查 componentWillUpdate，然后我将触摸所有无效的字段。

componentWillUpdate(nextProps) {
    const {
      formName: { syncErrors },
      submitFailed,
      touch
    } = this.props

    if (submitFailed !== nextProps.submitFailed) {
      const toTouch = []

      for (const key in syncErrors) {
        syncErrors.hasOwnProperty(key) && toTouch.push(key)
      }
      touch(...toTouch)
    }
  }

Answer 2

我认为您的问题恰恰相反，但是万一有人像我一样在寻找一种方法在触摸表单中的任何字段后设置 anyTouched...

在 redux-form 6 及更高版本 中，您必须使用表单级配置 touchOnChange 和 touchOnBlur 明确选择您想要的行为 - see the docs here - 默认情况下没有任何配置，所以什么也不会发生。

const Form = reduxForm({
  form: 'my-form',
  touchOnChange: true,
  touchOnBlur: true
})(...)

这些标志使得任何给定的字段被标记为已触及（因此 anyTouched 在表单上被标记为 true）当该字段的 onChange 或 onBlur handler分别被调用。

Answer 3

在 redux-form 7.4.2 中。这可以通过检查表单是否有效来实现。

如果有效，您可以加载您的其他页面之一。如果表单无效，使用 reduxForms getFormSyncErrors 选择器并将此对象返回的键传递给 reduxForm touch 属性。

import React, { Component } from 'react'
import { compose } from 'redux';
import { connect } from 'react-redux';
import { reduxForm, getFormSyncErrors } from 'redux-form';

class MyComponent extends Component {

  ...

  this.props.valid ? 
    // navigate away 
    : this.props.touch(...Object.keys(this.props.formErrors))

  ...

}

function mapStateToProps(state) {
  return {
    formErrors: getFormSyncErrors('myForm')(state)
  }
}

export default compose(
  connect(mapStateToProps, null),
  reduxForm({form: 'myForm'})
)(MyComponent)

Redux 表单 - 如何将字段设置为触摸

Redux form - how to set fields as touched

redux

redux-form

react-redux