piceatech / ember-rapid-forms

Smart, Intuitive forms for Ember.js styled with Bootstrap, Multi layouts and Validation support.

Ember-Rapid-Forms

Rapid, Smart, Intuitive forms for Ember.js styled with Bootstrap & Validation ready.

This is a fork of the original over at https://github.com/indexiatech/ember-forms

Installation & Tutorial

With Ember-CLI:

ember install ember-truth-helpers
ember install ember-rapid-forms

Please visit the documentation for installation & usage documentations: http://piceatech.github.io/ember-rapid-forms

Version Support

The Plugin starting from version 1.0.0 doesn't support ember versions below 1.13. If you need support for this work with a version < 1.0.0 or alternativly use https://github.com/indexiatech/ember-forms. If you use ember 2.0, 2.1 or 2.3, you have to use ember-rapid-forms '1.0.0-beta10'.

Plugin Development

Linting

• npm run lint:hbs
• npm run lint:js
• npm run lint:js -- --fix

Running tests

• ember test – Runs the test suite on the current Ember version
• ember test --server – Runs the test suite in "watch mode"
• ember try:each – Runs the test suite against multiple Ember versions

Running the dummy application

• ember serve
• Visit your app at http://localhost:4200.

Running Tests

To test on all ember versions: ember try:each

• ember test
• ember test --server

Building

• ember build

Releasing a new version

• Make the required changes which follow the Conventional Commits Specification.
• Run the script npm run release
• git push --tags && npm publish

Contributing

Process of creating a PR

1. Create PR
2. Wait for one of the Team members to review change
3. Respond to feedback
4. Get changed merged

What a PR should include

A PR should include the following things:

• Changed Files (duuh)
• Test(s) showing what was fixed / added / deprecated
• No failing tests
• Added Documentation if needed

Issues

• Make sure you test against master. It may already got fixed
• Search for similiar issues
• Provide a JSBin with an example if possible

Contributors

• Asaf Shakarchi (asaf)
• Ben Limmer (blimmer)
• Brandon Parsons (brandonparsons)
• Felix Fichte (spruce)
• Jack Matthews
• Josemar Luedke (josemarluedke)
• Josh Pfosi (joshpfosi)
• Michael Latta (TechnoMage)
• Patrick Ma (fivetwentysix)
• Pedro Kiefer (pedrokiefer)

Building and updating the Documentation

1. Build the docs: npm run update-page
2. Upload the new pages git push origin gh-pages
3. If you don't have push access create PR (see section about PR)

ember-rapid-forms's Issues

Support for autocomplete attribute in em-* helpers

As title says, I'd like to be able to pass, for example, autocomplete='off' to {{em-input}}. Ember's {{input}} helper allows for this, but with {{em-input}}, this doesn't work:

{{em-input property="X" placeholder="X" autocomplete='off'}}

disable on em-text has no effect

Setting the disabled=true flag on the em-text component seems to be dysfunctional e.g.:

{{#em-form model=answer submit_button=false}}
  {{em-text rows="2" property="text" disabled=true}}
{{/em-form}}

It appropriately sets the disabled flag in the component but the input field does not carry the disabled=true binding.

Steps to first major version

Things which need to be done to reach next version

• implement showAllErrors + Docs (see: indexiatech/ember-forms#52) (PR in the works)
• horizontal glitch fix
• address most issues from https://github.com/indexiatech/ember-forms/issues
• include pull requests from https://github.com/indexiatech/ember-forms/pulls
• layout bug fix —> don't use Layoutname but layout instead
• more tests
  • Checkbox test
  • Input test
  • Select test
  • Control within label test
  • Mixin's tests
  • Util's tests
• tests for on keyup pr
• Support for DS.Errors

Not able to work with em-select

Hello,

I have many problems with em-select. I have this form :

  {{#em-form model=model submitButton=false}}
    {{em-select label="User" property="user" content=users
      prompt=" " optionValuePath="id" optionLabelPath="email"}}
  {{/em-form}}

In the controller I have this :

import Ember from 'ember';

export default Ember.Controller.extend({
  users: function() {
    return this.store.findAll('user');
  }.property('users')
});

I have this message Cannot read property 'id' of undefined at this line. I replaced it by const selectedValue = content.objectAt(selectedIndex); and go one step further. I have no error but I have not result when I do that :

  console.log(this.controller.model.get('user.id'));

Furthermore, there is a problem on the doc. Labels are blank.

Thanks for your help!

createBoundSwitchAccessor syntax is deprecated on ember 1.13

Not able to display errors with canShowErrors

Hello,

I have this form in a template :

  {{#em-form model=model submitButton=false}}
    {{em-input value=email canShowErrors=true}}
  {{/em-form}}

When the model has errors, errors are not displayed. I added this :

    {{#each model.errors.email as |error|}}
      {{error.message}}
    {{/each}}

And it works. How to display errors in inputs? It's not clear in the doc. I think the documentation can be improved.

Use the array of record instead a conversion with `em-select`

Hi,

With em-select, we have to have an array like this [{id: 1, name: 'Value 1'}, {id: 2, name: 'Value 2'}] so, if we find records like this this.store.findAll('users'), we have to a loop that convert each value and keep it in an array. I think it should be better to use the array of models directly.

Error: Ember.deprecate should be an object

I am getting the error:

Uncaught Error: Assertion Failed: options argument to Ember.deprecate should be an object.

No stack trace, so it's hard to figure out where it comes from.
Any ideas?

(ps: using beta two and ember 2.0.2)

Explain how to create a custom input

Em-checkbox not working

See here - http://piceatech.github.io/ember-rapid-forms/#/overview - try clicking checkbox for Active property. You'll see that value of Active isn't updated.

Same happens in my application. In ember-idx-forms I needed to use empty label and it worked, but since I switched to ember-rapid-forms it doesn't work. My code:
{{em-checkbox property="rulesAccept" label=" "}}
But I guess since example on your page doesn't work my code isn't needed. I'm waiting for this fix.

Edit:
Using standard ember input helper works:
{{input type='checkbox' checked=model.rulesAccept }}

Create tests for formLayout = horizontal

check whether new commits from ember-form make sense to merge

Cleanup component attributes

Component attributes that are shared across many components should be documented in only one place.

Error message not displaying when validation fails

I am using ember-rapid-forms 0.6.2. Comparing files, I have the same version of all the key dependencies (like ember-cli, ember, ember-data, ember-validations, etc).

Two related issues:

Issue 1: The error message text is not showing up even though the model.errors. contains errors (and consequently the errors array contains values) because the validations have failed.

Issue 2: When the form is first displayed, the help text is not showing. You have to focus out for the help text to display. The help text is not overridden if there are errors (because validation(s) have failed).

I am not expert. I spent several hours trying to isolate the problem. Anyone else having this problem? If not, any clues what I could be doing wrong?

Change in model should be reflected in form

See: indexiatech/ember-forms#82
and: indexiatech/ember-forms#23

Demo menu is broken

Btw. you know that your demo is broken? If you click on a menu element the menu disappears...
Noticed by @wzrdtales

Custom CSS Class on control and label

First, thanks for taking over this project. Great work so far.

It would be nice to be able to customize the CSS classes on the control and label when using just the input component.

So something like

{{ em-input
  label="Test Label"
  property="test-label"
  controlWrapper = "col-md-6"
  labelClass= "col-md-4"
}}

would output like

<div class="form-group">
    <label class="control-label col-md-4">Company Name</label>
    <div class="col-md-6">
        <input class="form-control" type="text">
    </div>
</div>

make clear how the process to make changes to addon + docs

`cid` attribute not working

I am trying to set either the name or id of the input field generated by {{em-input}} using the cid tag and it is entirely dysfunctional as far as I can tell.

Is this correct usage:

{{#em-form model=this submitButton=false}}
  {{em-input property="identification" cid="email"    type="email"    placeholder="Enter your email"}}
{{/em-form

A helper named 'eq' could not be found with em-select

Hello,

I use this helper in a template :

{{em-select content=all_skills}}

I don't find with eq helper is called.

Any idea?

Sever side errors are not handled and break

I am using ember-rapid-forms 0.6.2 (released today). Comparing files, I have the same version of all the key dependencies (like ember-cli, ember, ember-data, ember-validations, etc).

When a server side validation fails, the current code does not seem to handled it and worse causes a runtime error (unless I've done something incorrectly). Take the simple controller below that is linked to a model that has the EV.Mixin:

import Ember from 'ember';

export default Ember.Controller.extend({
    actions: {
        save: function() {
            if (this.get('model.isValid')) {
                var _this = this;
                this.get('model').save().then(
                    function(friend) {
                        try {
                            _this.transitionToRoute('friends.show', friend);
                        }
                        catch(err) {
                            _this.set('errorMessage', 'Error: Internal error in route transition.');
                        }
                    },
                    function(err) {
                        _this.set('errorMessage', 'Error: ' + err.message );
                    }
                );
            } else {
                // should never happen because submit should be disabled when invalid
                this.set('errorMessage', 'Error: One or more input fields are not valid.');
            }
            return false;
        }
    }
});

When there is a server error, the this.get('model').save() promise rejects with an error:

TypeError: recordErrors.add is not a function
at Ember.Object.extend.adapterDidInvalidate (http://localhost:4200/assets/vendor.js:69415:24)
at ember$data$lib$system$store$$Service.extend.recordWasInvalid
...

Since there is always a chance that a server error may not be covered by the client, it seems like the server error should be returned instead.

Feedback and/or help would be much appreciated.

Add integration test for Ember Data and em-select

Get a test case working for Ember Data models with relationships hasMany / belongsTo working with an em-select component.

Improve documentation os this use case.

differences

hi, can someone please explain to me the ember-rapid-forms and ember-forms, what are the differences? why you guys need to fork a new project from the original codes.

in addition, how can i write a server validator (eg, email unique check from server) on a text field only if the field is lost focus (it means the user done for entering) ?

thanks

em-select Errors without optionValuePath & optionLabelPath

If you pass a standard array of options to em-select it throws a Uncaught TypeError: Cannot read property 'indexOf' of undefined

Example Code:

// ==== test.coffee ====
`import Ember from 'ember'`

TestComponent = Ember.Component.extend
  testOptions: Ember.A(['opt1', 'opt2', 'opt3'])
  testOptions2: Ember.a([
    {label: 'opt1', value:'opt1'}
    {label: 'opt2', value:'opt3'}
    {label: 'opt3', value:'opt3'}
  ])

`export default TestComponent`

// ==== test.emblem ====
// The first select fails, the second & third selects work.
.div
   em-form model=model action='action'
     em-select property='name' label='Name' content=testOptions prompt='Choose a Name'
     em-select property='name' label='Name' content=testOptions optionValuePath='content.value' optionLabelPath='content.label' prompt='Choose a Name'
.div
   view 'select' content=testOptions

Deprecate params with underscore

Lots of parameters still use underscore to separate words when the convention is to use camelCase.

• Add deprecate message to all underscore parameters
• Change all underscore parameters to camelCase
• Make parameters names more meaningful when needed

Is it possible to use it without bootstrap layout?

make a version which supports contextual component look ups

https://github.com/emberjs/rfcs/blob/master/text/0064-contextual-component-lookup.md

Fixes for ember 2.0

Ember-validation was updated to support ember 2.0 .
Ember-rapid-forms should use ember-validation 2.0.0-alpha.4 instead of alpha 3 (Ember Enumerable Utils were removed in 2.0 )

• upgrade ember-validation to 2.0.0-alpha.4

Test case and documenation for ember-forms #98

make future proof

https://gist.github.com/samselikoff/1d7300ce59d216fdaf97

See: indexiatech/ember-forms#94

Ember 1.13 deprecations.

getting this in the console:
Accessing template in <dashboard@component:em-input::ember2708> is deprecated. To determine if a block was specified to <dashboard@component:em-input::ember2708> please use {{#if hasBlock}} in the components layout.

I was going to work on a PR but this looks like a big change.

Cursor position error in em-input

When I add an em-input inside an em-form, type some text, move the cursor to the middle of the text and try to type more text, cursor automatically jumps to the end of the text.

https://v.usetapes.com/uA83Hodbju

This only happens when model is specified like this:

{{#em-form model=this}}
  {{em-input}}
{{/em-form}}

When I set model as a string, it works fine.

This problem only appears in versions 0.8.0-alpha2 and 0.8.0-beta2.

Nested form

I have a form like this :

{{#em-form model=model}}
  {{em-select label="Course" property="course" content=courses
    canShowErrors=true prompt=" " propertyIsModel=true optionLabelPath="name"}}
  {{#each model.contacts as |contact|}}
    <div class='row'>
      <div class='col-md-4'>
        {{em-input label="Name" property="contact.name" canShowErrors=true}}
      </div>
      <div class='col-md-4'>
        {{em-input label="Email" property="contact.email" canShowErrors=true}}
      </div>
      <div class='col-md-4'>
        {{em-input label="Phone" property="contact.phone" canShowErrors=true}}
      </div>
    </div>
  {{/each}}
{{/em-form}}

With this model :

import DS from 'ember-data';

export default DS.Model.extend({
  course: DS.belongsTo('course'),
  contacts: DS.hasMany('contact')
});

It doesn't work because contact is a relation. It can be useful to have something like {{#em-fields-for model=contact}}.

It can also be useful to have a model on inputs like {{em-input model=contact label="Phone" property="contact.phone" canShowErrors=true}} this allow to decouple inputs from form.

I'm ready to do a pull request but I need your opinion. What you think?

Uncaught TypeError: Cannot read property 'id' of undefined with em-select

Hello,

I have this simple select :

  {{em-select content=allSkills prompt="Select Skill"}}

The select tag is created succesfully with the right data but, once I click on a value, I have this error :

Uncaught TypeError: Cannot read property 'id' of undefined with em-select at [this line](https://github.com/piceaTech/ember-rapid-forms/blob/47e95af20fadbdccba83c4ed4d96ebd72d3930b4/addon/components/html-select.js#L39).

Here is the data in allSkills in JsonAPI format :

{"data":[{"id":"1","type":"skills","attributes":{"name":"Rails","description":null,"link":null}}]}

Is there something to do?

Use Block params

https://travis-ci.org/piceaTech/ember-rapid-forms/jobs/65471561#L414

Select belongsTo associaton

Hi,

I'm looking for a simple way to do a selection on a belongsTo association. I tried to do this :

    {{em-select label="User" property="user" content=users
      prompt=" "
      optionValuePath="id" optionLabelPath="id"}}

with this model :

import DS from 'ember-data';

export default DS.Model.extend({
  userId: DS.attr(),
  user: DS.belongsTo('user'),
  course: DS.belongsTo('course')
});

And it does not work.

I have to assign the userId and retrieve the user after. It can be useful to have directly.

What you think?

better tests for erf components

support for form without model

I'm having trouble using ember-rapid-forms for my login form.
The form has inputs for 2 properties: email and password, but these are properties on my login controller, not on a model. If model is null, the html-input component causes the following error:

Uncaught Error: Property set failed: object in path "mainComponent.model" could not be found or was destroyed.

It would be nice if the form could track the values on the controller instead of on the model.

Test for setting cid

Running application test leads to error

See: indexiatech/ember-forms#87
templateName is deprecated ( ember-cli/ember-cli#3510)

ember-cli 0.2.6 deprecation warning

[Deprecated] this.pickFiles is deprecated, please use broccoli-funnel directly instead  [addon: ember-rapid-forms]

Labels + Inputs Missing `for` Attributes

Update model bindings

Hello,

I have notice that updating the model attribute on forms dosnt update the actual form inputs. I noticed that this was an issue on ember-forms repo and a PR has been merged that fixes this:

indexiatech/ember-forms#92

Is there any chance of getting this merged?

Thanks

Support for disabled em-text

See: indexiatech/ember-forms#95

TypeError: Cannot read property 'value' of undefined when I type something on a textarea.

Hello,

I have this controller :

export default Ember.Controller.extend
  newMessage:(->
    @store.createRecord('message')
  ).property('newMessage') 

And this template :

  {{#em-form model=model}}
    {{em-text canShowErrors=true property="body"
      label="Body" placeholder="Type a message"
      class="body"}}
  {{/em-form}}

And this model :

export default DS.Model.extend
  body: DS.attr('string')
  trail_id: DS.attr('string')
  trail: DS.belongsTo('trail')
  created_at: DS.attr('string')

Each time I type something in the form, I always have "Cannot read property 'value' of undefined" at this line.

I think the reason is because this.$('input')[0]; returns undefined. The field is not an input but a textarea.

Thanks for your help.

em-select docs incorrectly show use of content. in optionValuePath and optionLabelPath

after upgrading my app to Ember 2.1 and upgrading to ember-rapid-forms 1.0.0-beta3 none of my select boxes had any values in them. After some debugging I found that i needed to remove the content. prefix to the optionValuePath and optionLabelPath properties.

It seems that the documentation in the demo app does not reflect this change yet.

Type="submit" attribute missing from em-form-submit

The em-form-submit component has a type property with value submit, but its template doesn't contain the type attribute.

Update bootstrap

Newer bootstrap has a different markup for handling validation icons.

This PR implements that: https://github.com/indexiatech/ember-forms/pull/86/files
After merging this we can update bootstrap to 3.3.

Make validations execute on keyUp

See: indexiatech/ember-forms#89

Move away from using `view` helper

The {{view}} helper will be removed in Ember 2.0, and is already deprecated in 1.13. It seems the architecture of this library is built upon using {{view}} to load the controlView. I don't see any quick-fixes for this, other than to change the architecture. Unfortunately, it seems the {{component}} helper only takes a component name as a string.

Has there been any thought about this already? Otherwise I'll need to start looking into other libraries or we need to do a big rewrite for this one or the original ember-forms.