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

Question

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

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

更新:根据 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

它在你的 Prop 中 - 你正在寻找表单级 Prop pristine和 valid .

提交后，pristine将重置，但如果请求不成功，您将收到 submitFailed Prop 。

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

也有反转的 Prop ，所以你可以使用

(dirty || submitFailed) && invalid

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

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