mobx-react-form icon indicating copy to clipboard operation
mobx-react-form copied to clipboard

Server Validation - cannot populate form errors

Open tsamsiyu opened this issue 7 years ago • 1 comments

Hello, I'm using server validation approach : submit form -> fetch errors from server -> populate form with errors and I came up with "key" issue. The problem is in the 'populate form with errors' step. Since each field has own key with which errors is associated and indexes of values from form.values() does not corresponds to that key-s, server responds with incorrect keys that cannot be populated to form through invalidate.

For example I have fields like the following (simplified version just to understand) :

{ items: 
    key: 'items',
    value: [
        { key: '0', value: { key: 'title', value: 'title 0' } },
        { key: '2', value: { key: 'title', value: 'title 2' } },
    ]
}

when I call form.values it returns:

{ items: [{title: 'title 0'}, {title: 'title 2'}] }

I post it to the server and taking errors list from it in form:

{
    'items.0.title' : 'some error',
    'items.1.title' : 'some error',
}

And obviously when I'm trying to populate form.$('items[1].title').invalidate(myError) i'm getting an error because of the actual key of second item is '2'.

I think it should be possible to get values from form with indexes equals to fields keys.

tsamsiyu avatar Dec 30 '17 13:12 tsamsiyu

I think the easiest and right way to fix this is to provide function that would return us the form values in shape which they actually have in form object. I mean instead of

{ items: [{title: 'title 0'}, {title: 'title 2'}] }

I need to take

{ items: {'0': {title: 'title 0'}, '2': {title: 'title 2'}} }

tsamsiyu avatar Feb 03 '18 22:02 tsamsiyu

I cannot replicate this issue without a full constructor configuration.

Feel free to reopen this with a codesandbox.

foxhound87 avatar Mar 26 '23 11:03 foxhound87