Fixed resetModel method with nested data

[shalkam]

This is my first time using Formsy and I had this issue.
Reseting the form was not working with nested data.
A one liner fix thanks to the great form-data-to-object library.

Thanks for this great repo :-)

[aesopwolf]

Thanks for the PR 😃

Would you mind describing the problem more clearly when you say nested data? Did you have nested form elements? I'm not even sure that's allowed/possible. If you could provide some sample code that would be great.

Also, it looks like one of the tests is failing.

[shalkam]

Hi @aesopwolf ,
So, I will explain the problem I was facing .....
I have a form that it using nested fields like this

render() {
    return <Formsy.Form ref='form' onValidSubmit={this.submit.bind(this)} onValid={this.enableButton.bind(this)} onInvalid={this.disableButton.bind(this)}>
        <Input name="_id" value={null} type='hidden'/>
        <Input name="identifier[0][value]" label="National ID" required/>
        <Checkbox name="active" label="active?" value={false}/>
        <Input name="name[0][text]" label="Patient's Name" required/>
        <fieldset>
          <legend>Telecom</legend>
          <Select
            name="telecom[0][system]"
            label="System"
            help="This is a required select element."
            options={[
              {value: '', label: 'Select...'},
              {value: 'Phone', label: 'phone'},
              {value: 'Fax', label: 'fax'},
              {value: 'Email', label: 'email'},
              {value: 'Pager', label: 'pager'},
              {value: 'URL', label: 'URL'}
            ]}
            required
            />
          <Select
            name="telecom[0][use]"
            label="Use"
            help="This is a required select element."
            options={[
              {value: '', label: 'Select...'},
              {value: 'Home', label: 'Home'},
              {value: 'Work', label: 'Work'},
              {value: 'Temp', label: 'Temp'},
              {value: 'Old', label: 'Old'},
              {value: 'Mobile', label: 'Mobile'}
            ]}
            required
            />
          <Input name="telecom[0][value]" label="Value" required/>
        </fieldset>
        <Select
          name="gender"
          label="Gender"
          options={[
            {value: '', label: 'Select...'},
            {value: 'Male', label: 'Male'},
            {value: 'Female', label: 'Female'},
            {value: 'Other', label: 'Other'},
            {value: 'Unknown', label: 'Unknown'}
          ]}
          required
          />
        <Input name='birthDate' label='Birth Date' type="date"/>
        <button type="submit" disabled={!this.state.canSubmit}>Submit</button>
      </Formsy.Form>
  }
}

And on the edit page I need to load the existing data for the patient using the form.reset() method.
and simply it was not working.

componentWillReceiveProps(newProps){
    this.refs.form.reset(newProps.model);
  }

So the model is a nested object with arrays and stuff. like this for instance

{
name: [
{text: 'John Doe'}
]
}

So I've taken a look at the existing code in the resetModel method, I thought that converting the object to this format will solve the issue:

{
'name[0][text]': 'John Doe'
}

So, I started to try to figure out how to do this and luckily the code for that has already been there in the form-data-to-object package 😃

Also, it looks like one of the tests is failing.

I don't know why I just added a single line fixing the problem

[aesopwolf]

Thanks for the sample code. This is a situation that should be solved in user-land then. Just import form-data-to-object into your app and call:

this.refs.form.reset(formDataToObject(newProps.model));

But really, I would suggest naming your inputs something more friendly, like so:

<Input name="_id" value={null} type='hidden'/>
<Input name="identifier" label="National ID" required/>
<Checkbox name="active" label="active?" value={false}/>
<Input name="name" label="Patient's Name" required/>

And then you can normalize your reset data to look like this:

{
  _id: 123,
  identifier: 'abc'
  active: 'checked',
  name: 'John Doe'
}

I'm going to close this since it's not something that should be in the core library. We appreciate the PR though!

[shalkam]

@aesopwolf Well, I disagree. for my use case I am implementing a rather complex data structure you can check it out HL7 Patient Resource and the data has to be this way.
And since it's by default formsy supports submitting complex forms ( discussed Here ), it should work the other way around too.
Anyway, I had my problem solved and this can remain as a reference for people facing the same problem.