Question

我正在使用React + Redux和redux-form进行表单处理和验证。到目前为止，它很容易使用，我可以使用field.touched和field.error轻松检查各个表单字段的验证状态，但我似乎无法找到任何方法或属性，它会告诉我是否有任何整个表单中的错误。 React的工作方式，任何表单加载后都会产生一堆错误，这就是你需要使用field.touched来测试各个字段的原因。

我想要做的是如果表单中的任何地方有任何错误，只显示一些通用标记，但只触摸一次。所以真的，我希望有像form.touched和form.error这样的东西。我有一个帮助函数的设计，它将检查表单中的所有字段并返回一个布尔值，但如果可能的话，我宁愿避免这种情况。

更新根据Andy_D的回答，我已更新我的代码以使用表单级属性dirty和invalid，但dirty似乎无法正确更新。提交表单并查看单个字段级错误后，表单仍显示dirty: false。

下面是我的代码的简化版本以及提交表单后this.props对象的内容。

import React, { Component } from 'react';
import { reduxForm } from 'redux-form';
import { makeBooking } from '../actions/index';

class PaymentBooking extends Component {
    render() {
        const { fields: { school }, handleSubmit } = this.props;

        return (
            <form className="form-horizontal" onSubmit={handleSubmit(this.props.makeBooking)}>
                {
                    console.log(this)
                }
                {
                    this.props.dirty && this.props.invalid ? <div className="alert alert-danger" role="alert">Test error wrapper</div> : ''
                }
                <h2>Make a New Payment Booking</h2>
                <div className="panel panel-default">
                    <div className="panel-heading">Payment Information</div>
                    <div className="panel-body">
                        <div className={`form-group ${school.touched && school.invalid ? 'has-error' : ''}`}>
                            <label htmlFor="school" className="col-lg-2 control-label">Your School</label>
                            <div className="col-lg-10">
                                <select name="school" className="form-control" {...school}>
                                    <option value="MIT">MIT</option>
                                    <option value="Stanford">Stanford</option>
                                    <option value="Arizona">Arizona</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
                <div className="form-submit">
                    <button type="submit" className="btn btn-primary">Book a Payment</button>
                </div>
            </form>
        );
    }
}

function validate(values) {
    const errors = {};

    if (!values.school)
        errors.school = 'School is a required field';

    return errors;
}

export default reduxForm({
    form: 'PaymentBookingForm',
    fields: ['school'],
    validate
}, null, {makeBooking})(PaymentBooking);

this.props提交后：

{
  "readonly": false,
  "asyncValidating": false,
  "dirty": false,
  "errors": {
    "school": "School is a required field"
  },
  "fields": {
    "school": {
      "name": "school",
      "defaultChecked": false,
      "valid": false,
      "invalid": true,
      "dirty": false,
      "pristine": true,
      "error": "School is a required field",
      "active": false,
      "touched": true,
      "visited": false
    }
  },
  "invalid": true,
  "pristine": true,
  "submitting": false,
  "submitFailed": true,
  "valid": false,
  "values": {}
}

Answer 1

它在你的道具中 - 你正在寻找表格级道具pristine和valid。

提交后，pristine将重置，但如果请求不成功，您将获得submitFailed道具。

(!pristine || submitFailed) && !valid && <ErrorMessage />

反转也有道具，所以你可以使用

(dirty || submitFailed) && invalid

正如我在评论中提到的，如果表格无效，我会阻止提交。

<button
  type="submit"
  className="btn btn-primary"
  disabled={pristine || invalid}
>Book a Payment</button>

Answer 2

在比赛后期，我刚刚发现自己处于这个位置。我需要知道Redux-Form中是否存在任何活动字段错误，以便可以禁用表单中的Submit按钮。

我的用例可能与OP不太相同，但是Andy_D的响应使我朝着正确的方向前进；但是，我发现pristine，dirty或pure对我的情况没有帮助。一旦将它们从其默认值切换出来，它们就会一直保持这种状态，直到重新加载组件为止。

valid和invalid会根据表单是否有错误来回切换。因此，就我而言，我可以执行以下操作：

<button 
    disabled={ this.props.invalid }
    type='submit' 
    className='btn btn-primary'
>
    Submit
</button>

我尝试使用Redux-Form的formValueSelector()之类的东西，但那里没有运气，所以这是我发现最适合我的最佳解决方案。

如何检查redux-form中是否存在任何错误

2 个答案: