Recommendation for multi-checkbox inputs?

[zeroasterisk]

What is your recommendation for multi-checkbox inputs?
Ideally I want to return an array of values, for all checked checkboxes, and specify them as uniforms.options

[radekmie]

It should be easy but on the second thought... It's doable in a hacky way but it's not what we want. It seems like there is a need for a new component - same as <SelectField /> but with checkboxes instead.

[radekmie]

I've got another idea - how about a checkbox (or checkboxes) prop on <SelectField />? It will be easier to switch between them - it's only an additional prop in schema or form. What do you think?

[zeroasterisk]

I agree, that is how I've seen it done with other form systems. Then the
schema type needs to support an array, and we are all set.

On Sat, Jun 18, 2016, 7:00 AM Radosław Miernik notifications@github.com
wrote:

I've got another idea - how about a checkbox (or checkboxes) prop on ? It will be easier to switch between them - it's only an additional
prop in schema or form. What do you think?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#33 (comment), or mute
the thread
https://github.com/notifications/unsubscribe/AABbfh0yG6uML5_HX0cEemluj2OXHFLdks5qM8_MgaJpZM4I4fIp
.

[radekmie]

I'll take care of this now.

[macrozone]

It's the same for radio-buttons:

List of radiobuttons are equal to select with single value

List of checkboxes are equal to select with multivalue

[GoaGit]

Dear @radekmie,

As I trying to allow multiple values for a single field, I am running into trouble. A list of checkboxes shows up in the client, but I can only select a sinlge value (single checkbox checked). I thought the checkboxes prop in the schema should do the trick. Any suggestions how should I change the implementation?

I am using uniforms version 1.0.1

// Schema definition
// Should allow for Category to hold multiple values in an array: [ 1, 3 ] of [ 1, 3, 4 ]
Category: {
    type: Number,
    optional: true,
    allowedValues: [ 1, 2, 3, 4 ],
    uniforms: {
        label: "Category",
        checkboxes: true,
        options: function(){
            return [
                    { label: "A", value: 1 },
                    { label: "B", value: 2 },
                    { label: "C", value: 3 },
                    { label: "D", value: 4 }
                    ]
        }
    }
}

// Form definition
<AutoForm
    schema={ CategorySchema }
    onSubmit={ ( doc ) => console.log(doc) }
>
    <SelectField name="Category" />
</AutoForm>

[zeroasterisk]

Try type=[Number]

[radekmie]

Yeah @GoaGit - @zeroasterisk is right.

Your field has a Number type which allows only one number, not an array of numbers. You should use [Number] instead.

[GoaGit]

Thanks @zeroasterisk, @radekmie, this is the appropriate way. However, my problem appears to be SimpleSchema related. The example provided is based on schema that is created from a base schema. SimpeSchema provides the pick method to create a new schema:

// MyCollection has the baseschema attached to it. I select one field "Category" in this case:

CategorySchema = MyCollection.schema.pick( 'Category' )

This throws an error because of the type: [ Number ] .

I duplicated the schema for now and this works.

[radekmie]

Let me guess - Meteor-Community-Packages/meteor-simple-schema#514?

[zeroasterisk]

Yeah - you can't "pick" for an nested/arrayed fields.

I've been splitting the object you pass into the SimpleSchema constructor into it's own "config" object... I can pick from those, and then pass into various SimpleSchema's with my composed/picked/varried configurations, at the end of the file.

eg:

const MyConfig = {
  thing: { type: [Number] }
};
const AltConfig = _.pick(MyConfig, 'thing');
const MySchema = new SimpleSchema(MyConfig);
const AltSchema = new SimpleSchema(AltConfig);

[GoaGit]

Thanks @zeroasterisk, your suggestion works.

@radekmie: I don't now if it is related to the issue you mentioned.

(Note: Picking from array fields appears to be possible. E.g. this works for me:

...
field: { type: Array },
'field.$': { type: Object },
'field.$.item': { type: String }
...

followed by

export const NewSchema = MyCollection.schema.pick( 'field', 'field.$', 'field.$.item' );

and

<AutoForm
    schema={ NewSchema }
    onSubmit={ ( doc ) => console.log( doc ) }
>
    <SubmitField value="Save" />
    <ErrorsField />
    <ListField name="field">
        <ListItemField name="$"> 
            <TextField name="item" />
        </ListItemField>
    </ListField>
</AutoForm>

)

[radekmie]

@GoaGit: that's the exact reason of this issue.

[GoaGit]

@radekmie, confirmed. Thanks.