redux-form：1つの同期バリデータを動的に除外するにはどうすればよいですか？

Question

マイredux-form飾らフォームコンポーネントは条件付きで私のReduxの状態に応じて、emailフィールドを持っている（ユーザーがゲストであるかどうかによって異なります。）それが存在しているときに私は条件付きでのみ（そのフィールドを同期-検証する

レンダリングされました。）現在、フォームのバリデータにはemailフィールドバリデータが含まれており、フィールドはフォームから除外された場合でも実行されます。renderの間にこのバリデータが実行されます。

私はReduxの形式のデコレータの引数としてバリデータを渡す際に、状態が知られていない、フォームのバリデータを「インスタンス化」と。だから私は現在、これらの場所のいずれかにemailフィールドバリデーターを含めるかどうかを決定することができません。

状態に基づいて「実行時」/「検証時間」に、単一フィールドのredux形式のバリデータを動的に含める/除外する最適な方法は何ですか？

MyForm.js

import validate from './MyFormValidator'; 

// [form class whose render optionally shows the email component] 

export default reduxForm(
    { 
    form: 'myForm', 
    fields, 
    validate 
    } 
)(MyForm) 

MyFormValidator.js

import {createValidator, required, email} from '../../utils/validation'; 

export default createValidator({ 
    email: [email], 
    country: [required], 
    // ... 
}); 

utilsの/ validation.js

export function email(value) { 
    const emailRegex = /.../i; 
    if (!emailRegex.exec(value)) { 
    return 'Please provide a valid email address.'; 
    } 
} 

export function required(value, message) { 
    if (isEmpty(value)) { 
    return message || 'Required.'; 
    } 
} 

export function createValidator(rules) { 
    return (data = {}) => { 
    const errors = {}; 
    Object.keys(rules).forEach((key) => { 
     const rule = join([].concat(rules[key])); 
     const error = rule(data[key], data); 
     if (error) { 
     errors[key] = error; 
     } 
    }); 
    return errors; 
    }; 
} 

私の同期（私は5.3.1を使用しています）からリンクされているこの実装の後でモデル化されています。https://github.com/erikras/react-redux-universal-hot-example/blob/master/src/utils/validation.js

Answer 1

@lewiscowperのおかげで、この解決策がJavaScriptスラックで提案されました。

入力はテキストフィールドなので、入力がレンダリングされた場合、値は空の文字列として返されます。 valueがnull/undefinedであれば、我々はそれがレンダリングされませんでした知っているので、

そこで、我々は、フィールドの検証をスキップすることができます。

バリデータの偽陽性の使用を避けるために、私はemailUnlessNullに名前を変更しました。最後に

export function emailUnlessNull(value) { 
    // Don't validate the text field if it's value is undefined (if it wasn't included in the form) 
    if (value == null) { 
    return; 
    } 
    const emailRegex = /.../i; 
    if (!emailRegex.exec(value)) { 
    return 'Please provide a valid email address.'; 
    } 
} 

私は完全にバリデータを除外---とバリデータのロジックを複雑にし、それは使い方だ---ずっと良いだろうが、今この作品のためにしない解決策を考えます。

良い答えを受け入れることを嬉しく思います。

EDIT：

ます。また、オプションのフィールドレンダリングのシナリオでが、あなたはまた、それが空の文字列にする値だトリガー、ことを確認する必要があります。タッチされる前に、その値はバリデーターを通してヌルとして返されます。

MyForm。JS

componentWillReceiveProps(nextProps) { 
    const { values, fields, isGuestOrder } = this.props; 

    if (isGuestOrder && values.email == null) { 
    fields.email.onChange(''); 
    } 
} 

Answer 2

あなたがReact-Redux-Formを検討したい場合は、これはすでに内蔵されている：

import { Field } from 'react-redux-form'; 
import { required, email } from '../../utils/validation'; 

// inside render(): 
<Field model="user.email" 
    errors={{ email }} 
/> 

2つのことが起こる：（error中）

• エラーバリデータが実行されますすべての変更に。この動作を変更するには、validateOn="blur"を設定します。
• <Field>がレンダリングされた場合にのみ検証が行われます。 <Field>がアンマウントされている場合、そのフィールドの検証がリセットされます。