Перезаписать сообщения по умолчанию в redux-form-validators - PullRequest
Новая
       36

Перезаписать сообщения по умолчанию в redux-form-validators

0 голосов
/ 05 октября 2018

У меня проблемы с перезаписью сообщения об ошибке по умолчанию в redux-form-validators с использованием кода, предложенного документами: 

Object.assign(Validators.messages, {
    required: "This is a required field"
})

Это выдает ошибку

Валидаторы не определены

Проблема: Что это за объект Validators и где / как мы должны определить / использовать его, чтобы мы могли правильно переписать сообщения по умолчанию?

/ контейнеры / Животные / Animals.js 

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { reduxForm, Field } from 'redux-form';
import { required } from 'redux-form-validators';
import { renderTextField } from './FormHelpers';

class AnimalForm extends Component {
    constructor(props) {
        super(props);
        Object.assign(Validators.messages, {                // ERROR OCCURS HERE
            required: "This is a required field"
        })
    }

    render() {
        return (
            <div>
                <form>                     
                        <Field
                            label="Longitude"
                            name="location.coordinates[0]"
                            component={renderTextField}
                            type="text"
                            validate={[required()]}
                        />  
                </form>
            </div>
        )
    }

}

export default connect(mapStateToProps)(reduxForm({
    form: 'animal'
})(AnimalForm))

Ответы [ 3 ]

0 голосов
/ 07 октября 2018

Если вы хотите переопределить сообщения глобально, используйте метод Object.assign в вашем index.js или в каком-либо другом месте - делать это внутри компонента - крайне плохая идея.Чтобы сделать это глобально: 

import Validators from 'redux-form-validators'

Object.assign(Validators.messages, {
    required: "This is a required field"
})

// or 

Object.assign(Validators.messages, {
  required: {    
    defaultMessage: "This is a required field"
  }
})

Если вы посмотрите на свой пример кода, если вы хотите переопределить его только для компонента, то лучше сделать это локально: 

<Field
    label="Longitude"
    name="location.coordinates[0]"
    component={renderTextField}
    type="text"
    validate={[required({msg: "This is a required field"})]}
/>
0 голосов
/ 07 октября 2018

Я бы посоветовал вам выполнить проверку с использованием встроенных функций redux-form, чтобы вы могли лучше контролировать свою кодовую базу.И будет лучше отделить ваши формы, а не помещать их в контейнеры, что кажется немного странным.Обычно я делаю что-то вроде следующего:

Я создал компонент без состояния для формы, так как мы не планируем изменять состояние внутри этого компонента.

forms / animal.form.js 

import React from 'react';
import { connect } from 'react-redux';
import { reduxForm, Field } from 'redux-form';
import { renderTextField } from './FormHelpers';
import validate from './validate';
import submit from './submit';

let AnimalForm = (props) => {

  const {
    handleSubmit, submitting,
  } = props;

  return (
    <div>
      <form onSubmit={handleSubmit}>                    
        <Field
          label="Longitude"
          name="longitude"
          component={renderTextField}
          type="text"
        />
        <button type="submit" disabled={submitting}>Submit</button>
      </form>
    </div>
  );
};

AnimalForm = reduxForm({
  form: 'animal',
  onSubmit: submit,
  validate,
})(AnimalForm);

export default AnimalForm;

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

forms / validate.js 

const validate = (values) => {
  const errors = {};
  if (!values.longitude) {
    errors.longitude = 'This is a required field';
  }
  return errors;
};

export default validate;

Если ошибок проверки нет, вызывается функция submit из submit.js.

forms / submit.js 

function submit(values, dispatch, props) {

  // PERFORM YOUR OPERATIONS HERE AND DISPATCH ACTIONS

  const body = {
    longitude: values.longitude,
  };

  dispatch(createAnimal(body));

}

export default submit;

Надеюсь, это поможет.Приветствия.

0 голосов
/ 05 октября 2018

Попробуйте добавить валидаторы к вашему импорту 

import { Validators, required } from 'redux-form-validators'
...