Redux Forms提交验证不会设置错误消息

Question

我正在尝试使用提交验证进行表单.当我提交表格时,我handleSubmit被解雇并抛出SubmissionError,但没有任何事情发生.

提交(每次只抛出错误):

function submit(values)
{
   console.log(values);
   throw new SubmissionError({ password: 'Wrong password', _error: 'Login failed!' });
}

从示例中渲染字段:

const renderField = ({ input, label, type, meta: { touched, error } }) => (
  <div>
    <label>{label}</label>
    <div>
     <input {...input} placeholder={label} type={type}/>
     {touched && error && <span>{error}</span>}
   </div>
  </div>
 )

我的表格:

class LoginForm extends Component {
  render()
  {
    const {  error, handleSubmit, pristine, reset, submitting  } = this.props
    console.log(error);
    return (
      <div>
        <form onSubmit={handleSubmit}>
          <h1>Login</h1>
          <Field name="email" type="text" component={renderField} label="Username"/>
          <Field name="password" type="text" component={renderField} label="Username"/>
           {error && <strong>{error}</strong>}
          <button type = "submit">Login</button>
        </form>
      </div>
     )
  }
}

LoginForm = reduxForm({
    form: 'login',
    onSubmit: submit
})(LoginForm);

export default LoginForm;

当我按下时Submit,调用提交函数,抛出异常,但没有其他任何事情发生,并且错误信息在表单中renderField没有显示.

Answer 1

您需要向 reduxForm 构造函数添加一个验证方法，如下所示：

function validateInput(input) {
  let errors = {}

  if (!data.email) {
    errors.email = "Email is required."
  } 

  if (!data.password) {
    errors.password = "Password is required."
  }

  return errors 
}

const loginForm = reduxForm({
  form: 'login',
  onSubmit: submit,
  validate: validateInput
})

如果错误无效，这将导致 redux-form 在输入字段下显示错误。

当然，您需要使用react-redux connect 连接您的组件，才能像这样工作：

export default connect(mapStateToProps)(loginForm(LoginForm))