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

Question

我正在使用由多个页面组成的表单,我想解决验证问题.

当我点击提交按钮时,当前页面上的所有字段都显示下面的错误消息,但是如果我更改了页面,那么我需要再次点击提交,因为这些字段没有设置为触摸.

如果我能够将页面上的所有字段设置为触摸,一旦表单具有标记,我的问题就会得到解决anyTouched: true.

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

Answer 1

我认为你的问题是相反的方式,但万一有人在这里登陆,因为我在寻找一种方法,anyTouched在表格中的任何一个字段被触及后...

在redux-form 6及更高版本中,您必须使用表单级配置明确选择所需的行为,touchOnChange并且touchOnBlur- 请参阅此处的文档 - 默认情况下未配置任何内容,因此不会发生任何事情.

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

这些标志使得当分别调用该字段或处理程序时,任何给定字段都被标记为被触摸(因此在表单上anyTouched被标记true).onChangeonBlur

Answer 2

我应该看起来更好：

Redux 表单将触摸作为组件的道具返回。该函数将字段的名称作为参数，因此我正在检查componentWillUpdate何时submitFailed会发生变化，然后我将触摸所有无效的字段。

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