[question] How to implement multiple selection based on enum

[eliasturbay]

Version

Tell us which versions you are using:

• tcomb-form-native v0.6.9
• react-native v0.46

Question

Let's say I have this enum:

const DeliveryType = t.enums({
  IN_PERSON_PICKUP: 'In-Person Pickup',
  LOCAL_DELIVERY: 'Local Delivery',
  SHIPPING: 'Shipping'
});

and I want a list field based on that enum to allow multiple selection. How should I implement something like that? Can someone guide me? Thanks in advance!

[vendramini]

On the onChange function, you should verify what options was selected. Then, just recreate your model.

You could create a function createFields(value) that returns your model based on your value, and assign it in your <t.form.Form tag on render method.

createFields(value) {
    //... some code
    if(value.DeliveryType == SHIPPING) {
        myModel.postalCode = t.String;
    }
    //...some code
    return myModel;
}

Then your new fields will exists and automatically added to your form.

Got it?

[compojoom]

@vendramini - I don't know for @eliasturbay, but I didn't get it. I've already made some progress with multiple-selection, but as I wrote here: https://github.com/gcanti/tcomb-form-native/issues/382 - I'm failing at the validation state as enums expect a single value.

[phillbaker]

Seems like this is a dupe of https://github.com/gcanti/tcomb-form-native/issues/131 ?

[jupiter23]

@vendramini Hi, I am having the same issue as @compojoom. I have the multiselect component working by using the factory config.

My model is like this:

const Choices = {
  'First': 'First choice',
  'Second': 'Second choice',
}

const EnumChoices = t.enums(Choices, 'Choices');

const Model = t.struct({
  choices: EnumChoices,
});

const options = {
  label: "The Choice Maker",
  auto: 'placeholders',
  fields: {
    choices: {
      label: 'Make a choice',
      choices: Choices,
      factory: MultiSelectExample,
    }
  }
};

The Form component

          <Form
              ref = {component => this._form = component}
              type={Model}
              options={options}
              value={this.state.value}
              onChange={this.onChange}
          />

If I select only one element from the UI, this._form.getValue() will return it. If I select more, this._form.getValue() will return null.