ReduxForm: как использовать asyncValidation с полями редукционной формы - PullRequest
Новая
       30

ReduxForm: как использовать asyncValidation с полями редукционной формы

0 голосов
/ 12 июня 2019

Я пытаюсь убедиться, что пользователь не вводит имя шаблона, которое уже существует в службе, с помощью asyncValidate.this.props.templateData - это редуктор шаблонов, импортированный в наш корневой редуктор, который по сути является тем, что вызывает данные полезной нагрузки.this.props.templateData это: 

import {GET_TEMPLATE_DATA} from './actions';

const DEFAULT_STATE = [];
const DEFAULT_ACTION = {};

export default (state = DEFAULT_STATE, action = DEFAULT_ACTION) => {
    switch (action.type) {
        case GET_TEMPLATE_DATA:
            return [...action.payload.data];
    }
    return state ? state : DEFAULT_STATE;
};

как мы импортируем реквизиты для этого компонента в asyncValidate для проверки этой информации.

export const asyncValidate = (values, props) => {
    console.log("HAHA: ", getTemplateData())
    return new Promise((resolve, reject) => {
        // let status = props.getTemplateData;
        // let zip = props.zipCodeDetails;
        let templateNames = this.props.templateData;
        const templateName = templateNames.map(tempData => tempData.name);
        // Couldn't talk to the service
        if (templateName.includes(values)) {
            reject({name: 'This template name is already taken.'});
            // Template name is valid
        } else {
            resolve();
        }
    });

onSubmit() {
        asyncValidate(); 
        // console.log('YO TRY TO SUBMIT', asyncValidate(this.props.templateData));
        this.props.history.push('/create-new-template-attributes');
    }

<Field
   className="usaa-input"
   component={Textarea}
   label="Template Name"
   name="name"
   maxLength={128}
   minRows={1}
   validate={[required, templateValidator]}
   // onChange={this.asyncValidate}
/>

export default reduxForm({
    form: 'templateForm',
    destroyOnUnmount: false,
    asyncValidate,
    asyncBlurFields: ['name']
})(createTempPage);
...