https://github.com/benoror/ember-formly

JavaScript powered forms for Ember
https://github.com/benoror/ember-formly

addon ember form-builder forms

Last synced: about 2 months ago
JSON representation

JavaScript powered forms for Ember

• Host: GitHub
• URL: https://github.com/benoror/ember-formly
• Owner: benoror
• License: mit
• Created: 2015-08-13T18:43:20.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-09-27T03:34:30.000Z (about 7 years ago)
• Last Synced: 2024-11-05T14:53:44.285Z (about 2 months ago)
• Topics: addon, ember, form-builder, forms
• Language: JavaScript
• Size: 61.5 KB
• Stars: 25
• Watchers: 3
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Ember-formly

> JavaScript Powered Forms for Ember.js

[![NPM](https://nodei.co/npm/ember-formly.png)](https://npmjs.org/package/ember-formly)

![Download count all time](https://img.shields.io/npm/dt/ember-formly.svg) [![Ember Observer Score](https://emberobserver.com/badges/ember-formly.svg)](https://emberobserver.com/addons/ember-formly) [![Build Status](https://travis-ci.org/benoror/ember-formly.svg?branch=master)](https://travis-ci.org/benoror/ember-formly) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

ember-formly is an Ember.js addon based on [angular-formly](https://github.com/formly-js/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](http://g.recordit.co/8cn0KyxHYO.gif)

### Route/Component/Controller:

```javascript

  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

```handlebars

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

```

### `fieldClassName`

Apply a `class` to each `field`:

```handlebars

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

```

### Block

Use custom markup for each field:

```handlebars

{{#ember-formly fields=fields as |field|}}

  


    {{ember-formly-field

      field=field

      model=model.nested

      onchange=(action 'foobar')}}

  

{{/ember-formly}}

```


## Advanced Usage

### Callback actions

```javascript

const fields = [

  {

    key: 'date',

    component: 'date-picker',

    options: {

      label: 'Pick a date!',

      callback: function(value) {

        window.alert('Selected date: ' + value);

      }

    }

  }

];

```

date-picker.js:

```handlebars

  {{pikaday-input

    value=value

    onSelection=(action options.callback)}}

```

# Development

## Installation

* `git clone` this repository

* `npm install`

* `bower install`

## Running

* `ember server`

* Visit your app at http://localhost:4200.

## 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/](http://ember-cli.com/).