Selects and radio elements does not get detected automaticly when using quickForm or afQuickField

[mfjohansson]

Hi!

Selects and radio elements does not work when using quick formats for the form or field (quickForm or afQuickField). Compare the two screenshots below to get the idea of what I mean:

...is the output of the following code:

<div class="control-group{{#if afFieldIsInvalid 'radioBoolean'}} error{{/if}}">
    {{afFieldLabel 'radioBoolean'}}
    {{afFieldInput 'radioBoolean' radio="true" trueLabel="Yes" falseLabel="No"}}
    {{#if afFieldIsInvalid 'radioBoolean'}}
    <span class="help-block">{{afFieldMessage 'radioBoolean'}}</span>
    {{/if}}
</div>
<div class="control-group{{#if afFieldIsInvalid 'selectBoolean'}} error{{/if}}">
    {{afFieldLabel 'selectBoolean'}}
    {{afFieldInput 'selectBoolean' select="true" trueLabel="Yes" falseLabel="No"}}
    {{#if afFieldIsInvalid 'selectBoolean'}}
    <span class="help-block">{{afFieldMessage 'selectBoolean'}}</span>
    {{/if}}
</div>
<div class="control-group{{#if afFieldIsInvalid 'requiredSelect'}} error{{/if}}">
    {{afFieldLabel 'requiredSelect'}}
    {{afFieldInput 'requiredSelect' options=numSelectOptions}}
    {{#if afFieldIsInvalid 'requiredSelect'}}
    <span class="help-block">{{afFieldMessage 'requiredSelect'}}</span>
    {{/if}}
</div>
<div class="control-group{{#if afFieldIsInvalid 'optionalSelect'}} error{{/if}}">
    {{afFieldLabel 'optionalSelect'}}
    {{afFieldInput 'optionalSelect' options=strSelectOptions}}
    {{#if afFieldIsInvalid 'optionalSelect'}}
    <span class="help-block">{{afFieldMessage 'optionalSelect'}}</span>
    {{/if}}
</div>
<div class="control-group{{#if afFieldIsInvalid 'firstOptionSelect'}} error{{/if}}">
    {{afFieldLabel 'firstOptionSelect'}}
    {{afFieldInput 'firstOptionSelect' firstOption="(Select Something)" options=numSelectOptions}}
    {{#if afFieldIsInvalid 'firstOptionSelect'}}
    <span class="help-block">{{afFieldMessage 'firstOptionSelect'}}</span>
    {{/if}}
</div>

...is a part of the following code:

{{quickForm schema="Documents" type="insert" id="myQuickForm" buttonContent="Insert" buttonClasses="btn btn-primary"}}

[aldeed]

Yes, the quickForm feature is still a work in progress. I haven't added any way to indicate that you want it to be a radio or select control yet. I haven't figured out the best way to supply the information yet since you'd normally add attributes to the afFieldInput helper. It would be kind of hard to supply the same information on a single quickForm helper. I'm thinking maybe some way of passing a settings object to the quickForm helper would be best.

I suspect that most people won't be able to use quickForm except in really simple models and maybe admin UI where the form doesn't have to be user friendly. It's a nice idea, but in reality there are usually too many little tweaks you need to make to specific fields.

If you have any ideas about how to do it, suggestions and pull requests are welcome.

[aldeed]

Although, adding it to afQuickField shouldn't be that hard. I was thinking mostly of adding it to quickForm, which would be hard, but afQuickField should be more straightforward. I'll try to do that this week.

[mfjohansson]

Great!

CakePHP (a PHP framework, obviously) is using some kind of detection method for this purpose. For instance, if you pass options to the field helper it will generate a select box/radio buttons.

I'm going to take a look at the code and see what I can do. I've never edited a meteor(ite) package before though. :)

[aldeed]

I've used CakePHP for several projects, but I think their method is dependent on the concept of associations between sql tables. It might be possible for quickform to automatically decide in some instances (like when allowedValues is in the schema), but possibly not all. I can certainly support passing options to afQuickField, though.

[aldeed]

OK, everything should work with afQuickField now. You can pass any attributes, such as an options list, just like you would to the afFieldInput helper and it will work. Plus, you can pass attributes prepended with "label-" and those will be added as attributes of the generated label element.

Note that this version also has updated default classes for the HTML generated by afQuickField. I'm using the latest Bootstrap 3 RC1 class names now: .form-group, .form-control, .control-label, and .has-error. Might impact your CSS.

[aldeed]

Also documented in the afQuickField section of the readme if you have any questions.

[mfjohansson]

Looking fantastic!

Great job!