-
Notifications
You must be signed in to change notification settings - Fork 436
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fixed resetModel method with nested data #413
Conversation
reseting the form was not working with nested data
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. |
Hi @aesopwolf , 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 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 {
'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
I don't know why I just added a single line fixing the problem |
Thanks for the sample code. This is a situation that should be solved in user-land then. Just import 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! |
@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. |
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 :-)