mobx-react-form: Toggle component Type error

Hey Claudio! I’ve got one for ya 😃

I’m using your mobx-react-form nested fields Demo, in rfx-stack. I added more fields to the members[].hobbies[] nested field.

The problem is the field type is not being detected as Boolean unless I set a value for that field. Since it is nested, and I can add more fields, as soon as I click + to add a fieldset with the Toggle element, I get props errors because mobx-react-form sets the value as a blank string, instead of false. And thus when I click the Toggle it does not work or set correct value from form state.

Warning: Failed prop type: Invalid prop switched of type string supplied to EnhancedSwitch, expected boolean.

The documentation only mentions in using Separated Properties method of initializing fields I can pass in a defaults and types, but without any example of formatting I am lost. I tried using members[].hobbies[] formatting and also as a nested object, with no luck. I wish to use Boolean for the checkbox value as material-ui requires, so that I may also align the type with my feathers/mongoose API schema as Boolean also.

I hope I am making sense! I can show example code or repo if you need.

Rich

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 18 (9 by maintainers)

Commits related to this issue

#199 — committed to foxhound87/mobx-react-form by foxhound87 7 years ago
fix: #199 — committed to foxhound87/mobx-react-form by foxhound87 7 years ago
fix: #199 — committed to foxhound87/mobx-react-form by foxhound87 7 years ago
fix: #199 — committed to foxhound87/mobx-react-form by foxhound87 7 years ago

Most upvoted comments

Yesss you rock!!!

richieio on Feb 5, 2017

No bother! Hope this fix should work. Let me know if you encounter other issues.

foxhound87 on Feb 5, 2017

Thanks Claudio!! That was fast! Much appreciation. I am trying it now.

richieio on Feb 5, 2017

This update will only work for separated props mode.

The values object will take precedence on the initials object anyway.

So if you set a value prop for a field it will fill its initial prop, discarding the initials object value.

Example:

// assume we have these nested fields:

const fields = [
  'members[].hobbies[]',
  'members[].hobbies[].name',
  'members[].hobbies[].active',
];

// we can setup initial values this way: 

const initials = {
  'members[].hobbies[].name': 'Initial Value',
  'members[].hobbies[].active': true,
};

foxhound87 on Feb 5, 2017