is there a canonical meteor.js forms package?

Question

Is there a forms package that is considered canonical or one that is likely to be similar to whatever would eventually end up in core?

In my searching I came up with two main contenders, based on activity, throughouness, and documentation (but there may be others):

• https://github.com/copleykj/Mesosphere
• https://github.com/aldeed/meteor-autoform

If anyone has looked through both of these could you comment on why or where you might use one versus the other?

Answer 1

As this has not been answered, I'll chime in with a 'why you should do it yourself' argument.

A form is both display of DOM and validation. I think Meteor's tools for both are good enough, to not need another abstraction between them.

Consider what meteor gives you: you can write a class for your objects, that itself understands all the validations and rules. Not in a generic, 'must be a number way', but in as complicated a way as they exist (must be a prime number?). You can write this class, and it can run on both the client and the server. You should always validate on both the client and the server. Validation libraries sprung up because client and server were (at least) two different languages. Node/Meteor is JS everywhere.

Why not use that wonderful feature? Don't put validation code in multiple places. Give your data to your object, let it accept or reject it on the client (and on the server).

For example, I create each text element through a combination of my own template, and a helper function:

The form

{{label_text fname='name' title='Agent Name' placeholder='Formal Name' collection='agent'  passthrough='autofocus=autofocus ' }}
{{label_text fname='agentInCharge' title='Agent In Charge' placeholder='Owner' collection='agent'   }}
{{label_text fname='phone' title='Phone Number(s)' placeholder='Include Area  Code'collection='agent'   }}
{{>gps }}

The template

<template name='label_text'>
    <div class="row">
        <label class="large-3" for="{{fname}}_{{_id}}">{{title}}</label>
        <div class="large-8">
            <input name="{{fname}}" 
                   id='{{fname}}_{{_id}}' 
                   class="{{fname}}" 
                   value="{{value}}"
                   data-original="{{value}}" 
                   placeholder="{{placeholder}}" 
                   type="{{type}}" {{passthrough}}  />
        </div>
    </div>
</template>

and a few helpers:

generateField = (options) ->
  options.hash.value = options.hash.value or this[options.hash.fname]

  # allow for simple params as default
  options.hash.title = options.hash.title or options.hash.fname
  options.hash.template = options.hash.template or "label_text"
  options.hash.placeholder = options.hash.placeholder or options.hash.title
  options.hash.type = options.hash.type or 'text'

  new Handlebars.SafeString(Template[options.hash.template](options.hash))



Handlebars.registerHelper "label_text", (options) ->
  options.hash.collection = options.hash.collection or 'generic'  
  generateField.call this, options

Handlebars.registerHelper "label_text_area", (options) ->
  options.hash.collection = options.hash.collection or 'generic'
  options.hash.template = "label_text_area"
  options.hash.rows = options.hash.rows or 3
  options.hash.columns = options.hash.columns or 40
  generateField.call this, options

Handlebars.registerHelper "switch", (options) ->
  options.hash.template = "switch"
  options.hash.em = options.hash.em || 7
  generateField.call this, options

Then I send data to the client object to see what it thinks.