redux-formにエラーが存在するかどうかを確認する方法

Question

私はReact + Reduxを使用しています。フォーム処理と検証のためにredux-formを使用しています。これまではかなり使いやすく、field.touchedとfield.errorを使用して個々のフォームフィールドの検証状態を簡単に確認できますが、メソッドやプロパティが見つからないようですフォーム全体のエラーReactが動作する方法は、フォームがロードされるとすぐにエラーの束を生成するため、個々のフィールドをテストするためにfield.touchedを使用する必要があります。

私が探しているのは、フォーム内のどこにエラーがあっても、一度だけ触れた場合にユニバーサルマークアップを表示することです。本当に、私はform.touchedとform.errorのようなものがあることを望んでいました。私はフォームのすべてのフィールドをチェックし、ブール値を返すヘルパー関数のための設計を念頭に置いていますが、可能ならばこれを避けたいと思います。

UPDATE：Andy_Dの答えを1として 、私は、フォームレベルのプロパティ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>