2017-09-14 52 views
1

我有一個改變口令表格,在下面的結構領域是未註冊時同步錯誤觸發

<Field name={FORM_FIELDS.OLD_PASSWORD} component={FInputField} type="password" 
validate={[Validation.required]} /> 
<Field name={FORM_FIELDS.NEW_PASSWORD} component={FInputField} type="password" 
validate={[Validation.required]} /> 
<Field name={FORM_FIELDS.CONFIRM_PASSWORD} component={FInputField} 
type="password" validate={[ Validation.shouldMatch(password)]} /> 

和shouldMatch功能

export const shouldMatch = (matchValue) => { 
return (value) => { 
    return value !== matchValue ? t('common/validationNotMatch') : undefined 
} 
}; 

當我輸入在CONFIRM_PASSWORD字段不匹配,我得到了以下行爲

{ type: '@@redux-form/UPDATE_SYNC_ERRORS', meta: { form: 'changePassword' }, 
payload: { syncErrors: { confirmPassword: 'common/validationNotMatch' } } } 

但是在此行動之後,UNREGIS TER_FIELD動作發生,這使窗體以清除同步錯誤對象

{ type: '@@redux-form/UNREGISTER_FIELD', meta: { form: 'changePassword' }, 
payload: { name: 'confirmPassword', destroyOnUnmount: true } } 

則字段再次

{ type: '@@redux-form/REGISTER_FIELD', meta: { form: 'changePassword' }, 
payload: { name: 'confirmPassword', type: 'Field' } } 

註冊的任何幫助,爲什麼UNREGISTER_FIELD行動發生在這裏?以及如何在出現不匹配時將驗證消息始終顯示出來。

回答

1

docs for the Field prop validate他們提到

注:如果驗證道具改變字段將被重新註冊。

我在想這可能是潛在的問題。從您發佈的代碼中,Validation.shouldMatch(password)行中的password變量來自哪裏,這一點並不清楚。但是爲了讓函數有意義,我猜想每當password更改時,該行都會生成一個新函數。 (即驗證支持將會改變)。

但是,也從文檔中,我讀到validate支持的簽名。是

(值,allValues,道具,名)=>錯誤[可選]

因此,看來你應該能夠從allValues得到password值來代替,然後你可以或許避免改變validate道具。喜歡的東西:

export const shouldMatch = (repeatedPassword, allValues) => { 
    const newPassword = allValues[FORM_FIELDS.NEW_PASSWORD]; 
    return repeatedPassword !== newPassword ? 
    t('common/validationNotMatch') : 
    undefined 
}; 

而且使用它像

<Field 
name={FORM_FIELDS.CONFIRM_PASSWORD} 
component={FInputField} 
type="password" 
validate={[ Validation.shouldMatch ]} 
/>