ウィザード形式のフォームで複数の検証を行うことはできますか？

Question

私はredux-formパッケージを使用してreact-nativeでウィザードのようなフォームを構築していますが、条件付きで各ステップをexampleのようにレンダリングしていません。

特定の重要な設計要件：

1. 続けるボタン複数のフィールドを持つ各ステップが有効になるまで無効になっています。
2. 各ステップ間の遷移をアニメートする必要があります。また、その下にアニメーションの進行状況バーを表示する必要があります。

これまでのところ、私は水平FlatListコンポーネントに組み込まれているすべての私の異なるステップを持っており、それは動作しますが、他のステップからフィールドをレンダリングし、まだ有効ではありませんされているので、私は上のContinueボタンを無効にする方法がありません私が最初にやろうとしたものであるthis.props.invalidフラグを使用して、1歩ずつ繰り返します。この例では、各ステップの送信ボタンが有効になっています。このボタンを使用すると、フォームを送信し、現在のステップの保留中の検証をトリガーできます。

私の質問は、ステップvalidを考慮するために、これらの個々のフィールドをグループ化し、いくつかのタイプの更新されたプロップを得る方法がありますか、または各ステップに異なるフォーム名を使用して、最後のものを提出するとき？

このタイプの設定については、redux-formsを使用していただければ幸いです。ありがとうございます！

Answer 1

reduxフォームgetFormSyncErrorsセレクタを使用して問題を解決しました。

import { 
    reduxForm, 
    Field, 
    getFormSyncErrors 
} from 'redux-form'; 

まず、現在お使いの同期検証ルールを失敗するフィールドの配列でsyncErrors小道具を追加し、あなたのセレクタを作成します。

Component = connect(
    state => ({ 
    syncErrors: getFormSyncErrors('formName')(state) 
    }) 
)(Component); 

はその後、私のコンポーネントで、私は現在のステップのための検証を必要と syncErrors配列におけるそれらの存在をチェックするフィールドを比較します。現在のステップにエラーがない場合は、 Continueボタンが有効になります。

render(){ 
    const { syncErrors } = this.props; 
    const fields = ['first_name', 'last_name', 'email']; 
    const errorFields = syncErrors ? Object.keys(syncErrors) : []; 
    const hasErrors = fields.some(el => errorFields.indexOf(el) >= 0); 

    return(
    {...Fields} 
    <ActionButton 
     text='Continue' 
     handleButtonPress={this.goToStep} 
     disabled={this.props.pristine || hasErrors} 
    /> 
) 
}