petermumford/ember-form-master-2000

A flexible and lightweight ember-cli addon that tries to make forms easier to deal with.

Installation

This is an ember-cli addon and can be installed using npm:

npm install --save-dev ember-form-master-2000

Demo

You can see the basic dummy app here:

Basic API

{{#fm-form action='submit'}}

  {{fm-field type='text' value=model.first_name errors=model.errors.first_name label='First Name'}}

  {{fm-field type='password' value=model.password}}

  {{fm-field 
    label='Choose Something' 
    type='select'
    content=model.selectOptions
    optionValuePath='content.id'
    optionLabelPath='content.label'
    prompt='Select Something'
  }}

  {{fm-field
    label='Write an Essay'
    type='textarea'
    value=model.essay
    errors=model.errors.essay
    rows='6'
  }}

  {{fm-checkbox checked=model.exampleModel.isAwesome label='Are you awesome?'}}

  {{fm-radio-group
    label='Choose the best language'
    name='bestLanguage'
    content=model.radioOptions
    optionValuePath='content.value'
    optionLabelPath='content.label'
    value=model.exampleModel.bestLanguage
    errors=model.exampleModel.errors.bestLanguage
  }}

  {{fm-submit value='Create'}}

{{/fm-form}}

Errors

Displaying validation errors is a core requirement for any form library. To keep things simple, you must explicitly tell fields where to look for errors. When provided an array of errors, fm-field will display the first error.

var model = Ember.Object.create();
model.set('errors', Ember.Object.create({first_name: ['Required', 'Too short']}));

{{fm-field type='text' value=model.first_name errors=model.errors.first_name}}

Minor Customizations

If you need to make minor adjustments to classnames of the elements, you can easily override the default initializer with your own. The default initializer can be found here, which imports the initialize method form the addon directory.

Major Customizations

Sometimes you'll want to really customize things. In this case you can leverage the power of Ember-CLI and simply override the default templates provided by Ember-Form-Master-2000. These are all defined here. In simple terms, create a folder in your host application templates/components/ember-form-master-2000/, copy over the existing templates from this project, and modify to your liking.

Demo App

You can see a more holistic example by looking at the Dummy app that we use to test against. The index.hbs template and the application route are of particular interest.

petermumford / ember-form-master-2000