kettanaito / react-advanced-form

Functional reactive forms. Multi-layer validation, custom styling, field grouping, reactive props, and much more.
https://redd.gitbook.io/react-advanced-form
MIT License
217 stars 24 forks source link

MessageResolverArgs do not contain field value property #387

Closed nshaikhinurov closed 5 years ago

nshaikhinurov commented 5 years ago

Environment

What

MessageResolverArgs do not contain a value property of the field

Current behavior

MessageResolverArgs do not contain field's value property when a MessageResolver is executed. As described in Docs MessageResolverArgs should contain the value prop. I used the code below and saw only fieldProps and form in the o's keys and no value prop.

Although there is a needed value prop inside a fieldProps object the current behaviour doesn't match the one described in the Docs. As a result I get "The e-mail undefined has invalid format" after validation.

export const validationMessages = {
    generic: {
        missing: 'Please provide the required field',
        invalid: 'The value you have provided is invalid',
    },

    type: {
        email: {
            missing: 'Please provide the e-mail',
            invalid: o => {
                console.dir(o)
                return `The e-mail ${o.value} has invalid format`
            },
        },
    },

Expected behavior

o object contains the value prop

kettanaito commented 5 years ago

Hello, @nshaikhinurov. Thank you for the reporting the issue. I confirm this unexpected behavior is reproducible in 1.7.1. See more technical details below.

Cause

There is a resolverArgs object passed through the entire validation chain:

validateField -> validate -> reflectValidation -> getMessages -> getMessages

The issue was that the original input for validateField did not contain any [valuePropName]: fieldProps[valuePropName] pair in the resolver args. Since they are passed as-is down the validation chain, when it got to getMessages, it didn't contain that value pair either.

I've fixed that behavior by explicitly setting the dynamic value pair on message resolver arguments. This should eliminate the unexpected behavior you are describing. Will be published in the next patch release.

Tip: Note that based on the fieldProps.valuePropName the key name that represent a field's value will differ in the message resolver arguments. That said, if you are using a checkbox, you need to access its value like ({ checked }) => 'message'. This is an expected behavior.

kettanaito commented 5 years ago

Fix published under 1.7.2. Please update and let me know that message resolvers behave as described in the documentation. Thank you for contributing!

nshaikhinurov commented 5 years ago

Fix published under 1.7.2. Please update and let me know that message resolvers behave as described in the documentation. Thank you for contributing!

Yep! Updating to 1.7.2 worked fine and solved the issue. The value prop is there 🎉