我可以在嚮導式窗體中執行多個驗證嗎？

我在使用redux-form包的react-native構建了一個類似嚮導的窗體，但沒有像在example中那樣有條件地渲染每個步驟。我可以在嚮導式窗體中執行多個驗證嗎？

一些重要的設計要求：

的繼續按鈕將被禁用，直到與多個領域的每一步都有效。
我需要爲每個步驟之間的轉換設置動畫，並在其下方顯示一個動畫進度條。

到目前爲止，我已經內置到水平FlatList分量我所有的不同的步驟和它的工作原理，但由於其他步驟領域被渲染和尚未生效，我也沒有辦法來禁用一個的Continue按鈕使用this.props.invalid標誌，這是我最初試圖做的。在該示例中，每個步驟的提交按鈕都已啓用，允許您提交表單並觸發當前步驟的未決驗證。

我的問題是：有沒有辦法將這些單獨的字段分組，並獲得某種類型的更新的道具以考慮步驟valid，或者我可以爲每個步驟使用不同的表單名稱，然後合併不同的步驟/表單當提交最後一個？

感謝這種使用redux-forms的設置，謝謝！

來源

2017-10-18 eballeste

我通過使用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} 
    /> 
) 
}

來源

2017-10-18 17:37:14 eballeste

我可以在嚮導式窗體中執行多個驗證嗎？

回答

相關問題