Reduxフォーム - タッチされたフィールドを設定する方法

Question

私は複数のページからなるフォームを使用しており、検証を解決したいと思います。

[送信]ボタンを押すと、現在のページのすべてのフィールドにエラーメッセージが表示されますが、ページを変更すると、これらのフィールドがタッチされていないため再送信する必要があります。

たとえば、フォームにフラグanyTouched: trueがあると、ページのすべてのフィールドをタッチするように設定すると問題が解決します。

私はredux-form: '^6.0.0-rc.4'を使用していますが、私はredux形式と複数のフィールドからなる複数のコンポーネントを含む1つのコンテナを持っています。

Answer 1

私が良く見ている必要があります。

Reduxのフォームは、コンポーネントへの小道具としてのタッチを返します。この関数はフィールドの名前をパラメータとして扱いますので、submitFailedが変更されたときにcomponentWillUpdateをチェックしてから、無効なフィールドをすべてタッチします。

componentWillUpdate(nextProps) { 
    const { 
     formName: { syncErrors }, 
     submitFailed, 
     touch 
    } = this.props 

    if (submitFailed !== nextProps.submitFailed) { 
     const toTouch = [] 

     for (const key in syncErrors) { 
     syncErrors.hasOwnProperty(key) && toTouch.push(key) 
     } 
     touch(...toTouch) 
    } 
    } 

Answer 2

私はあなたの問題は周りに反対の方法だったと思うが、私は、フォーム内の任意のフィールドをタッチした後

で... anyTouchedセットを持っている方法を探していたように、ケースには誰もがここの土地redux-form v6では、フォームレベルの設定で必要な動作を明示的に選択する必要があります。touchOnChangeおよびtouchOnBlur - see the docs here - デフォルトでは何も設定されていないため何も起こりません。

const Form = reduxForm({ 
    form: 'my-form', 
    touchOnChange: true, 
    touchOnBlur: true 
})(...) 

これらのフラグが触れたとして任意のフィールドがマークされているように、それを作る（したがってanyTouchedフォーム上trueをマークされている）、そのフィールドのonChangeやonBlurハンドラは、それぞれ、呼び出されたとき。