Проверять динамически сгенерированную форму в реакции с использованием приставки и повторной проверки? - PullRequest
Новая
       12

Проверять динамически сгенерированную форму в реакции с использованием приставки и повторной проверки?

7 голосов
/ 16 марта 2019

Я использую "revalidate" для проверки форм "redux-form", но я сталкиваюсь с такой ситуацией, когда есть форма, которая генерируется динамически на основе ответа API, который я сопоставляю и отображаю входные данные внутриform.

Вот пример того, как я обычно проверяю "избыточные формы" с помощью "revalidate ... 

const validate = combineValidators({
    name: composeValidators(
        isRequired({ message: "Please enter your full name." }),
        hasLengthLessThan(255)({
            message: "Name can't exceed 255 characters."
        })
    )(),
    email: composeValidators(
        isRequired({ message: "Please enter your e-mail address." }),
        matchesPattern(IS_EMAIL)({
            message: "Please enter a valid e-mail address."
        })
    )()
});

export default compose(
    connect(
        null,
        actions
    ),
    reduxForm({ form: "signupForm", enableReinitialize: true, validate })
)(SignUpForm);

Теперь, как мне поступить аналогично с автоматически сгенерированнымформы?

1 Ответ

3 голосов
/ 22 марта 2019

Идея состоит в том, чтобы получить dynamicFields из ownProps, который является вторым аргументом функции validate, и использовать их по своему усмотрению для заполнения проверки.

Поскольку combineValidators является функцией высокого порядка, после ее запуска мы вызываем результирующую функцию с values в качестве параметра. 

// assuming dynamicFields an array like:
[
    {
        id: 1,
        name: 'age',
        component: 'input',
        label: 'Age',
        placeholder: 'Age'
    },
    {
        id: 2,
        name: 'size',
        component: 'input',
        label: 'Size',
        placeholder: 'Size'
    }
]
///////

const validate = (values, ownProps) => {
const staticValidations = {
    firstname: composeValidators(
        isRequired({ message: 'Please enter the first name.' }),
        hasLengthLessThan(255)({
            message: "Name can't exceed 255 characters."
        })
    )(),
    lastname: composeValidators(
        isRequired({ message: 'Please enter the lastname' }),
        matchesPattern('abc')({
            message: 'Please enter a valid lastname'
        })
    )()
}
const dynamicValidations = ownProps.dynamicFields.reduce((accu, curr) => {
    accu[curr.name] = isRequired({ message: 'Please enter ' + curr.name })
    return accu
}, {})

return combineValidators({
    ...staticValidations,
    ...dynamicValidations
})(values)

}

В этом примере я просто добавляю isRequired, но вы можете быть более креативным, например. передача type в данные динамического поля и выполнение таких операций, как if type === ABC then do XYZ

Полные коды и окно подтверждения приведены здесь -> https://codesandbox.io/embed/py5wqpjn40?fontsize=14

...