GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → benoror → ember-formly

benoror / ember-formly

Licence: MIT license
JavaScript powered forms for Ember

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects
CSS
56736 projects

Labels

emberaddonformsform-builder

Projects that are alternatives of or similar to ember-formly

ember-validated-form-buffer
A validated form buffer that wraps Ember Data models for use in forms.
Stars: ✭ 46 (+91.67%)
Mutual labels:  ember, forms
ember-best-language
🏳 A FastBoot-enabled addon to detect the best language for your user.
Stars: ✭ 18 (-25%)
Mutual labels:  ember, addon
ember-app-shell
No description or website provided.
Stars: ✭ 23 (-4.17%)
Mutual labels:  ember, addon
ember-right-click-menu
An easy and flexible addon to add context menus anywhere in your application
Stars: ✭ 14 (-41.67%)
Mutual labels:  ember, addon
django-siteforms
Django reusable app to simplify form construction
Stars: ✭ 15 (-37.5%)
Mutual labels:  forms, form-builder
ember-audio
An Ember addon that makes working with the Web Audio API super EZ.
Stars: ✭ 33 (+37.5%)
Mutual labels:  ember, addon
ember-validity-modifier
Ember Octane addon to add custom validity (form validation) to form fields
Stars: ✭ 28 (+16.67%)
Mutual labels:  ember, forms
Ember Font Awesome
ember-cli addon for using Font Awesome icons in Ember apps
Stars: ✭ 225 (+837.5%)
Mutual labels:  ember, addon
ember-ref-bucket
This is list of handy ember primitives, created to simplify class-based dom workflow
Stars: ✭ 31 (+29.17%)
Mutual labels:  ember, addon
view component-form
Rails FormBuilder for ViewComponent
Stars: ✭ 120 (+400%)
Mutual labels:  forms, form-builder
ember-vertical-timeline
A Vertical Timeline for Ember.js apps 🚀
Stars: ✭ 19 (-20.83%)
Mutual labels:  ember, addon
ember-legit-forms
Component for creating flexible forms along with validations.
Stars: ✭ 41 (+70.83%)
Mutual labels:  ember, addon
ember-osf
Ember Addon for interacting with the Open Science Framework
Stars: ✭ 14 (-41.67%)
Mutual labels:  ember, addon
ember-contextual-services
Services in Ember are scoped to the app as a whole and are singletons. Sometimes you don't want that. :) This addon provides ephemeral route-based services.
Stars: ✭ 20 (-16.67%)
Mutual labels:  ember, addon
ember-window-messenger
This aims to be an simple window postMessage services provider.
Stars: ✭ 17 (-29.17%)
Mutual labels:  ember, addon
react-forms-processor
A forms processor for React
Stars: ✭ 63 (+162.5%)
Mutual labels:  forms, form-builder
Ember Page Title
Page title management for Ember.js Apps
Stars: ✭ 177 (+637.5%)
Mutual labels:  ember, addon
Ember Power Calendar
Powerful and customizable calendar component for Ember
Stars: ✭ 200 (+733.33%)
Mutual labels:  ember, addon
ember-foxy-forms
Ember Addon for Making Foxy Forms
Stars: ✭ 27 (+12.5%)
Mutual labels:  ember, forms
react-cool-form
😎 📋 React hooks for forms state and validation, less code more performant.
Stars: ✭ 246 (+925%)
Mutual labels:  forms, form-builder
View All Similar Projects ➔

Ember-formly

JavaScript Powered Forms for Ember.js

NPM

Download count all time Ember Observer Score Build Status PRs Welcome

ember-formly is an Ember.js addon based on angular-formly

The aim isn't to fully duplicate angular-formly's functionality, but instead to propose a new & simplified mechanism for automating form creation by using patterns like components (instead of custom directives) while keeping some key concepts like model and fields.

Installation

ember install ember-formly

Example

http://g.recordit.co/8cn0KyxHYO.gif

Route/Component/Controller:

  model() {
    return {
      age: 20,
      veggie: true,
      favcolor: '#0000ff',
      borndate: '1986-11-14'
    }
  },
  fields: computed(function() {
    return [
      {
        key: 'age',
        component: 'custom-fields/html-input',
        options: {
          type: 'number',
          label: 'Age'
        }
      },
      {
        key: 'veggie',
        component: 'custom-fields/html-input',
        options: {
          type: 'checkbox',
          label: 'Is a Veggie?'
        }
      },
      {
        key: 'favcolor',
        component: 'custom-fields/html-input',
        options: {
          type: 'color',
          label: 'Favorite Color'
        }
      },
      {
        key: 'borndate',
        component: 'custom-fields/date-picker',
        options: {
          label: 'Born Date'
        }
      }
    ]
  })

Basic Template

{{ember-formly fields=fields model=model}}

fieldClassName

Apply a class to each field:

{{ember-formly fields=fields model=model fieldClassName="foobar"}}

Block

Use custom markup for each field:

{{#ember-formly fields=fields as |field|}}
  <div class="baz-wrapper">
    {{ember-formly-field
      field=field
      model=model.nested
      onchange=(action 'foobar')}}
  </div>
{{/ember-formly}}

Advanced Usage

Callback actions

const fields = [
  {
    key: 'date',
    component: 'date-picker',
    options: {
      label: 'Pick a date!',
      callback: function(value) {
        window.alert('Selected date: ' + value);
      }
    }
  }
];

date-picker.js:

  {{pikaday-input
    value=value
    onSelection=(action options.callback)}}

Development

Installation

  • git clone this repository
  • npm install
  • bower install

Running

Running Tests

  • npm test (Runs ember try:testall to test your addon against multiple Ember versions)
  • ember test
  • ember test --server

Building

  • ember build

For more information on using ember-cli, visit http://ember-cli.com/.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].