Динамические проверки для программно визуализированных полей Redux

Question

Не удалось найти прямой ответ на проблему, с которой я столкнулся, поэтому надеюсь, что кто-то из SO сможет мне помочь ...

У меня есть простая форма Redux, которая имеет только поля ввода First Name и Last Name. Вместо того, чтобы записываться явно, эти поля визуализируются программно, например так:

...

renderNameInput(field) {
  const { content } = this.props;

  return (
    <Field
      id={field}
      name={field}
      component={FormField}
      validate={this.nameValidations}
      error={!this.isNameValid(field) ? content.nameError : null}
    />
  );
}

...

render() {
  <form onSubmit={handleSubmit}>
    <div>
      {this.renderNameInput('firstName')}
      {this.renderNameInput('lastName')}
    </div>
  </form>
}

У меня проблема с ошибкой, когда поле не проверяется. Каждое поле требует минимум 2 символа и максимум 16 (, хотя это не относится к моему конкретному вопросу ).

Что я пытаюсь сделать, так это то, что когда один из входов недействителен, под этим входом отображается ошибка. Если оба входа недействительны, то ошибка будет отображаться под обоими входами ( структура и стиль для отображения ошибок в их соответствующих местоположениях, конечно, выполнены, просто не является частью этого вопроса )

Вот метод, который я проверяю на наличие ошибок:

...

isNameValid(field) {
  const { formState = {} } = this.props;
  const { syncErrors } = formState;

  if (syncErrors && syncErrors[field]) {
    return false;
  }
}

...

Компонент подключен к хранилищу Redux, поэтому у меня есть доступ к объектам formState и initial и values в форме, а также к моменту, когда они были visit ed, touch ред и т. д.

Если - когда пользователь изменяет входное значение - объект syncErrors должен был выглядеть следующим образом при просмотре состояния Redux в хранилище ( произвольно ):

syncErrors: {
  firstName: 'Must be at least 2 characters'
}

Тогда я бы хотел, чтобы сообщение об ошибке отображалось на входе firstName, а на входе lastName - ничего. Аналогично, если lastName будет частью объекта syncErrors, то ошибка будет отображаться и под этим вводом. Если оба параметра firstName и lastName находятся в syncErrors, ошибка будет отображаться под обоими входами.

Надеюсь, это имело смысл, и кто-то может указать мне правильное направление. Если требуется какое-либо разъяснение, пожалуйста, дайте мне знать.

Спасибо!

Answer 1

Я действительно смог выяснить это. Я сделал этот метод:

...

isNameError(field) {
  const { content, formState = {}, submitFailed } = this.props;
  const { initial, syncErrors, values } = formState;

  if (!submitFailed || !syncErrors) {
    return null;
  }

  const isNotSameValues = initial[field] !== values[field];
  const invalidField = Boolean(isNotSameValues && syncErrors[field]);

  if (invalidField) {
    return content.nameError;
  }
}

...

Поскольку этот компонент был обернут в reduxForm, я смог использовать некоторые реквизиты, переданные моему обернутому компоненту - submitFailed и syncErrors. Если поле формы не прошло мою проверку правильности, объект syncErrors будет заполнен именем поля формы в качестве ключа и ошибкой проверки ( сообщение об ошибке ) в качестве значения.

Также, когда форма не была отправлена ​​из-за неудачной проверки, submitFailed prop - логическое значение - было установлено на true.

Я подключил свой компонент к хранилищу Redux, чтобы получить доступ к formState и использовать реквизиты initial и values, чтобы сравнить каждое значение поля ввода и выполнить проверку проверки.

Использование этого в моем начальном renderNameInput методе выглядит так:

...

renderNameInput(field) {
  const { content, formState = {}, submitFailed } = this.props;

  const label = get(content, `${field}Field.text`, '');

  return (
    <Field
      id={field}
      name={field}
      component={FormField}
      validate={this.nameValidations}
      error={isNameError(field)}
    />
  );
}

...

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

Большое спасибо за вашу помощь, @ldtcoop!

Answer 2

Если вы передаете сообщение об ошибке в качестве реквизита для компонента Field, то вам, вероятно, нужно просто добавить некоторый код в компонент Field, который показывает ошибку, если она есть.Это должно выглядеть примерно так: {this.props.error ? (<p>{this.props.error}</p>) : null}

Поскольку вы не можете изменить то, что появляется в компоненте Field, я бы предложил разрешить компоненту, в котором существует renderNameInput, доступ к ошибке.Объект в Redux.Таким образом, вы можете renderNameInput вернуть компонент Field и сообщение об ошибке.Примерно так:

renderNameInput(field) {
  const { content, error } = this.props;

  return (
    <div>
      <Field
        id={field}
        name={field}
        component={FormField}
        validate={this.nameValidations}
        error={!this.isNameValid(field) ? content.nameError : null}
      />
      <p>{error[field] ? (<p>{error[field]}</p>) : null}}</p>
    </div>
  );
}