https://github.com/benoror/ember-formly
JavaScript powered forms for Ember
https://github.com/benoror/ember-formly
addon ember form-builder forms
Last synced: 7 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 (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2017-09-27T03:34:30.000Z (over 8 years ago)
- Last Synced: 2025-10-08T03:00:41.798Z (8 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
[](https://npmjs.org/package/ember-formly)
 [](https://emberobserver.com/addons/ember-formly) [](https://travis-ci.org/benoror/ember-formly) [](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
### 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/).