Форма Redux - как установить поля как затронутые

Я работаю с формой, состоящей из нескольких страниц, и хочу выполнить проверку.

Когда я нажимаю кнопку «Отправить», все поля на текущей странице показывают сообщения об ошибках ниже, но если я изменяю страницу, мне нужно снова нажать «Отправить», потому что эти поля не были установлены как затронутые.

Моя проблема была бы решена, если бы я мог, например, установить все поля на странице как затронутые, когда форма имеет флаг anyTouched: true.

Я использую redux-form: '^6.0.0-rc.4', и у меня есть один контейнер, в который я включаю редукционную форму и несколько компонентов, состоящих из полей.


redux react-redux redux-form
person Jan Omacka    schedule 01.09.2016    source источник

Ответы (3)


arrow_upward
18
arrow_downward

Я думаю, что ваша проблема была противоположной, но на случай, если кто-то приземлится здесь, как я, ищу способ установить anyTouched после прикосновения к любому полю в форме...

В redux-form 6 и выше вы должны явно выбрать желаемое поведение с конфигурациями уровня формы touchOnChange и touchOnBlur — см. документацию здесь — по умолчанию ничего не настроено и поэтому ничего не происходит.

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

Эти флаги делают так, что любое заданное поле помечается как затронутое (и, следовательно, anyTouched помечается true в форме) при вызове обработчика onChange или onBlur этого поля соответственно.

person davnicwil    schedule 15.08.2017
comment
touchOnChange: true ...золото - person lukeaus; 20.03.2018

arrow_upward
8
arrow_downward

Я должен был выглядеть лучше:

Форма 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)
    }
  }
person Jan Omacka    schedule 01.09.2016

arrow_upward
1
arrow_downward

В редукционной форме 7.4.2. Этого можно добиться, проверив, является ли форма действительной.

Если это действительно так, вы можете загрузить одну из ваших других страниц. Если форма недействительна, используйте селектор getFormSyncErrors reduxForms и передайте ключи, возвращаемые этим объектом, в свойство 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)
person JSON C11    schedule 12.09.2018