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

Question

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

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

更新： 根据 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 中是否存在任何活动字段错误，以便我可以禁用表单中的提交按钮。

我的用例可能与 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 是否存在错误

How to check if any errors exist in redux-form

javascript

reactjs

redux

redux-form