2017-07-05 17 views
1

フォームの選択フィールドの値に基づいて必要とされる動的フォームフィールドがあります。すなわち、あるフィールドの値が "Yes"の場合はコメントボックスが必要で、 "No"の場合は必須ではありません。Reduxフォーム動的フィールドレベル検証

最初に「はい」を選択してタッチしてコメントフィールドをぼかすと、検証によって必要なエラーが返されます。しかし、「いいえ」に切り替えて「はい」に戻すと、検証エラーは発生しなくなります。コメントボックスに入力して削除すると、検証が再び行われます。

私はフィールドレベルの検証を使用しており、同じ問題で同期検証も使用しています。

<Field name={`${fieldId}.comment`} validate={condition.required ? [required] : []} label={condition.label} className="form-control" component={renderTextField} /> 

ここで、条件はフィールドが必須かどうかを確認するためのチェックです。

最初の選択の検証作業と、コメントフィールドを入力してテキストを削除しても、検証エラーが表示されないような場合は、ロジックは正しいです。

おかげ予め

答えて

2

the Redux-Form Field component docs (v 6.8.0)から引用:

検証:(値、allValues、小道具)=>エラー[オプション]

はあなたのフィールド - を提供することを可能にしますレベルの検証ルール。関数 には、フィールドの現在の値、他のすべてのフォーム の値、およびフォームに渡されたすべての小道具が与えられます。フィールドが有効な場合、 は未定義を返す必要があります。フィールドが無効な場合は、 エラー(通常は必ずしもそうである必要はありません)を返します。

あなたは直接Fieldにしてエラー値を渡すためにしようとしているが、validate小道具は、妥当性を判断するために使用される検証機能を受け入れることを意図しています。あなたはこのような何かをする必要があります:

const validateComment = (value, allValues, props) => { 
    // naturally you do something else here if the value 
    // used to determine whether this field is required or 
    // not is not managed by the same redux form 
    const isRequired = allValues.commentRequired === 'Yes' 

    if (isRequired && !value) return "Can't be empty." 
} 

<Field 
    name={`${fieldId}.comment`} 
    validate={ validateComment } 
    label={condition.label} 
    className="form-control" 
    component={renderTextField} 
/> 

これは助けてください!

関連する問題