Redux-form v5:如何在字段编辑后清除/隐藏提交错误

时间:2016-11-30 03:50:14

标签: javascript reactjs react-redux redux-form

编辑:关注问题

如何清除由Redux-Form v.5.3.3包装的表单的表单级别提交错误

我使用Redux-Form以多种形式使用任意提交行为。所有这些都使用props.error来获取提交错误以向用户显示。

当用户编辑表单字段时,错误消息不再适用。因此,我希望在下次提交之前将其清除(或者至少不向用户显示)。

编辑字段会清除字段级错误属性(例如props.fields.email.error)。我怎样才能清除表单级错误属性?

或者,您是否可以推荐一种可靠的方法来确定自提交以来已编辑过一个或多个字段?我可以用它来隐藏那个场景中的错误信息。

表单代码如下所示:

const MyForm = (props) => {
  const { fields: {name},
    error,
    handleSubmit,
    mySubmitHandler,
    submitting,
    ...otherprops
  } = props;

  return (
  <form onSubmit={ handleSubmit((values)=>{return mySubmitHandler(values, otherprops);}) }>
    <div className="error-message">{error}</div>
    <input {...name}>
  </form>
  );
};

和包装器:

function mapStateToProps(state) {
  return {
    user: state.authReducer.user
  };
}

function mapDispatchToProps(dispatch)
{
  return {
    mySubmitHandler: (values, props) =>{
      const { name } = values;
      const { user } = props;
      return dispatch(doAsyncAction(name, user))
      .catch(err=>{
        return Promise.reject({_error: err.message, name: err.message});
      });
    }
  };
}

function clientValidate(values)
{
  values = trimSpaces(values);
  const { name } = values;
  if (!name)
  {
    return {
      name: 'You must enter a name',
      _error: 'You must enter a name'
    };
  }
}

const fields = ['name'];
let MyFormContainer = reduxForm({
  form: 'myFormName',
  fields,
  validate: clientValidate,
  submitting: false
}, mapStateToProps, mapDispatchToProps)(MyForm);


export default MyFormContainer;

提前致谢! 附:关于redux-form v6,这与this unanswered question类似(可能相同?)。

原始问题:

行为我正在寻找:

  1. 用户提交表格&#34; bad&#34;数据
  2. 显示表单错误消息(对于整个表单,而不是特定字段),并使用CSS将字段文本颜色更改为红色
  3. 用户点击字段
  4. 文字变回黑色
  5. 用户进行编辑(键入char或删除char)
  6. 错误消息消失
  7. 这似乎是非常标准的行为,但到目前为止我还未能实现。如果有一种内置的方法(或类似的东西),我很乐意听到它。

    编辑:

    第4项是通过field.active属性处理的。谢谢,@ Erik!

    我想知道当用户重新回到字段时,或者至少在他们编辑字段时,如何清除错误。

0 个答案:

没有答案