indexiatech/ember-forms

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

                  __                    ____                         
  ___  ____ ___  / /_  ___  _____      / __/___  _________ ___  _____
 / _ \/ __ `__ \/ __ \/ _ \/ ___/_____/ /_/ __ \/ ___/ __ `__ \/ ___/
/  __/ / / / / / /_/ /  __/ /  /_____/ __/ /_/ / /  / / / / / (__  ) 
\___/_/ /_/ /_/_.___/\___/_/        /_/  \____/_/  /_/ /_/ /_/____/  
                                                                     

Ember-Forms

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

Looking for maintainer

Due to lack of time, I'm unable to continue the progress of this project and seeking for maintainers.

Installation & Tutorial

With Ember-CLI:

npm install --save-dev ember-idx-forms

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

Plugin Development

Running

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

Running Tests

• ember test
• ember test --server

Building

• ember build

ember-forms's Issues

Ember-forms doesnt update binding, keeps using the old record

I have a form bound to a book record. After i saved i want to "null out" the rcord, so i create a new one , but ember-forms keeps using the old one. Is it he normal behaviour? Or there is a better way to do it?

Here is a JsBin: http://jsbin.com/pexolude/48/edit and the stackoveflow link with solution:
http://stackoverflow.com/questions/24194731/emberjs-save-record-mockjax/

Using with ember-cli and ember-simple-auth

Hey,

I've got up and running with forms no problem, it's brilliant and has certainly saved me a lot of time! I have however just hit a roadblock.

I'm not entirely sure this is an issue, probably just my user error but I'm hoping someone here might have run into similar issues before or would be able to help.

I'm using ember-cli and am having issues getting ember-forms validation working. Rather than pasting the entire issue here again I've already posted it over here http://stackoverflow.com/questions/25142845/ember-cli-ember-forms-validation-and-ember-simple-auth

Much appreciated if anyone can take a look.

ember-model support

How can I transfer it to Ember-model?
I have some projects with ember-model. I think that Ember-data more compex.
Now I have smth like:

App.Company = Ember.Model.extend
  id: Ember.attr
  name: Ember.attr
  email: Ember.attr

App.Company.url = "/api/v1/companies"
App.Company.rootKey = 'company'
App.Company.collectionKey = 'companies'
App.Company.adapter = Ember.RESTAdapter.create()

But the validation does not work when I add them to the model with 'reopen'

Column Sizing

Control sizing

Error "Cannot read property 'pushChildView' of null" with Ember 1.8.0-beta.1

"Uncaught TypeError: Cannot read property 'pushChildView' of null" when using Ember 1.8.0-beta.1

See example.
http://jsbin.com/hategetutado/1/edit

Same example using Ember 1.7.0-beta.1.
http://jsbin.com/qawuwuxewobi/1/edit

(Examples are clones of examples from the Ember Forms docs.)

errors only on focusOut

Hi! its will be nice if canShowErrors not work only with focusOut. I used backendApi errors to set model.errors, its works well with ember-forms because its use the model.errors to. If wee get that control like: {{em-input label="Name" property="name" canShowErrors=error}}
Where error is a computed property, we will have the ember-forms with validation control in backendapi to.

Ember DS.errors in activeModelAdapter

great forms plugin for ember. How do you handle DS.Errrors?

my response from the serve is this

{
"errors": {
"location": [
"must be unqiue"
]
}
}

Invalid Code in Custom Submit Example

In the custom submit example, the new button needs an action or should be within the form.

Current

        {{#em-form model=model submit_button=false}}
        {{/em-form}}
        <div class="form-actions">
            <input {{bind-attr disabled=isntValid}} type="submit" class="btn btn-primary" value="Login">
        </div>

Fixed

        {{#em-form model=model submit_button=false}}
        <div class="form-actions">
            <input {{bind-attr disabled=isntValid}} type="submit" class="btn btn-primary" value="Login">
        </div>
        {{/em-form}}

Allow to reset form

Resetting form will:

• Remove the validation visibility (color/icon/etc) from its form groups
• Invoke 'model.reset()' if such a method exist, it's the responsibility of this method to reset the model (reset its properties values and clean up the errors object.

Getting the Tests Running

Howdy,

I'd like to start submitting some pull requests to this repo but can't seem to get the tests running locally. What's the protocol for getting these setup? I have grunt running, but I'm not sure what's supposed to happen next?

Once I have this setup I'm happy to write some docs.

JSBin in Docs Doesn't Work

It refers to a non-existent file (looks like the structure changed).

This docs page points to the JSBin that doesn't work.

Updated here to work correctly.

Ember Forms with form masks (E.g. jQuery Inputmask or Masked Input)

Just in case some other Ember starters scratch their head about Ember Forms and form masks like jQuery Inputmask or Masked Input.

The problem is (Or was) that {{em-input}} doesn't add the name property, and normally the form masks are also attached via ID, which seems not possible with Ember's IDs like "ember777", so we attach them via our now added name property.

Btw., if someone should have any input on the ID issue, I would like to hear about it.

ember_forms.js (Line 42):

/***
  Mixin that should be applied for all controls
   */
  Ember.Forms.ControlMixin = Ember.Mixin.create({
    classNameBindings: ['class'],
    "class": 'form-control',
    init: function() {
      this._super();
      // zLabs | Black | Simplistic way to get the name property (name="") within the <input> tag
      // E.g. to address it for form masks like jQuery Inputmask
      // (https://github.com/RobinHerbots/jquery.inputmask)
      // $('input[name="landline"]').inputmask('[phone]');
      this.set('name', this.get('propertyName'));

      return Ember.Binding.from("model." + (this.get('propertyName'))).to('value').connect(this);
    },
    hasValue: (function() {
      return this.get('value') !== null;
    }).property('value').readOnly()
  });

In your app.js (In case of jQuery Inputmask):

// So we can use this on any view
Ember.View.reopen({
  didInsertElement: function(){
    this._super();
    Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
  },
  afterRenderEvent: function(){
    // implement this hook in your own subclasses and run your jQuery logic there
  }
});

// Set our input masks (incl. placeholders) after the template got inserted
App.UserView = Ember.View.extend({
  afterRenderEvent: function(){
    this._super();
    $(document).ready(function(){
      $('input[name="landline"]').inputmask('[phone]');
      $('input[name="landline"]').attr('placeholder', '+61 (0_) ____ ____');
      $('input[name="mobile"]').inputmask('[phone]');
      $('input[name="mobile"]').attr('placeholder', '+61 (0) ____ ____');
    });
  }
});

I personally appreciate form masks, so I hope it helps someone. ;)

Project Infrastructure Updates (Broccoli, ES6, and Plain JS)

I was wondering if this project would be open to migrating to Broccoli, ES6 Modules, and plain old Javascript?

The reason I think this should be considered is to be more inline with the Ember community and the core developers.

I'd be interested in helping this migration process, but don't want to start unless there is a desire to do so. Let me know!

Ember validations api changed?

Hi,
Looking at the example http://ember-addons.github.io/ember-forms/#/quickexample, you've put the ember-validation in the model.
But the README of https://github.com/dockyard/ember-validations#usage, validation rule is added in controller instead of model.

So, does this work?

Add `required` and `autofocus` attributeBindings to `Em.Forms.FormInputComponent`?

Make an ember-cli addon

We should make an ember-cli addon for easy install/upgrades

help-block added even if no helpText

A span with class "help-block" is rendered even if there is no helpText (error messages) available.

This is not visible in a vertical form, but in a horizontal one this increases the distance to the following form. See the following screenshot taken from http://ember-addons.github.io/ember-forms/#/overview:

This can easily be reproduced: fill in something valid in the full name field, focus out of the field: the field turns green (has-success class), which is ok, but the distance to the password field is increased by the (empty) help-block!

It should not render a help-block, if it is empty anyway!

em-select does not work with Ember 1.7.0

The example is arbitrary, but it shows that the em-select doesn't work with Ember 1.7. Nothing appears in the select box.

Click "last name" select box to see the issue
JSBin working on Ember 1.6
JSBin failing on Ember 1.7

Any plan to include radio inputs ?

Select is broken in Ember 1.7

Following the docs for em-select doesn't work in 1.7. The options aren't rendering in the select. Reverting to Ember 1.6.1 solves the problem.

Selectbox Control

Form fields and integration tests

Hi there. I've been using ember-forms in my project and it's been working out great so far. Thanks to all the contributors to the project.

Is it possible to add custom classes to the input fields or the wrappers? The use case I have in mind is writing integration tests. Not seeing how to get a handle on the form field without being able to reference it by a known selector.

Thanks again!

Do you support i18n ?

Produce a minimized version of the dist file.

How to use with ember-cli?

Hi,
I'm trying to use this with ember-cli app.
The process:

bower install --save https://github.com/ember-addons/ember-forms/blob/master/dist/ember_forms.js

Then in Brocfile.js, I've put:

app.import('vendor/ember_forms/index.js');

And putting the template:

{{#em-form model=model}}
  {{em-input property="name" label="Full Name" placeholder="Enter a name..."}}
{{/em-form}}

The error is:

vendor/ember/ember.js:3521
Uncaught Error: <lgebs@view:default::ember391> Handlebars error: Could not find property 'em-form' on object (generated users.new controller). 

The issue might be due to the es6 modules?
How to solve it?

Support Form Horizontal Layout

Select value binding

Here is a very simple (working) example, to use the selected value of a select box:
http://jsbin.com/pexolude/66/edit

Every time you change the select, the console log shows its value. (I want to make two select boxes where the 2nd one's collection is based on the first one's value)

If i try to do the same with ember-forms select i fail misarable:

http://jsbin.com/pexolude/68/edit

What could be the reason? {{em-select}} is an extend of {{view Ember.Select}} what I used in the first example so it should act the same in this case.

Looking at the source code: https://github.com/ember-addons/ember-forms/blob/master/dist/ember_forms.js#L888 i can see that prompt, optionValuePath, optionLabelPath, content are aliased but value, valueBinding etc are missing.

Easy way to install ember-forms for ember-cli

I keep receiving an error from handle bars say 'em-form' is undefined.

I've installed it into the vendor directory with 'bower install --save ember-forms.'

Then I imported it into the brocfile with 'app.import('vendor/ember-forms/lib/main.coffee');'

Is it some incompatibility with ember-cli and .coffee files? My understanding is that they're supported out of the box.

Any help would be much appreciated!

SOLUTION:

Install into /vendor with bower : 'bower install --save ember-forms'

Add the following import into your brocfile.js file: 'app.import('vendor/ember-forms/dist/globals/main.js');'

Build and run your app: 'ember s'

You now have em-forms as a recognized global in your project, and can follow the documentation (http://indexiatech.github.io/ember-forms/#/quickexample) to actually implement them. ;)

Dynamic forms by meta data.

Support dynamic form rendering from meta data.

Does it work w/out ember-data?

Thanks for an amazingly helpful/well documented project! keep up the great work!

2 questions

1.) if I only have a basic ember object (no ember-data) will this work?
2.) how do I inject a simple "model" and use the markup for this very simple app?

https://github.com/toranb/ember-form-example

the controller is here

https://github.com/toranb/ember-form-example/blob/master/js/app/controllers/people.js

the hbs is here

https://github.com/toranb/ember-form-example/blob/master/js/templates/people.handlebars

I believe the refactor will remove almost all of this code (I'd like to see the diff but I found the markup I'm using /below isn't working for that model. Do I need a route to "new up" this model? if not how will this library know what model goes w/ my controller?)

{{#em-form model=model}}
    {{em-input property="name" label="Full Name" placeholder="Enter a name..."}}
    {{em-input property="password" label="Password" placeholder="And password..." type="password"}}
{{/em-form}}

invoke validate() manually

Hello,
I would like to use ember-forms.js in my project which has several tabs and one submit button. User can type invalid data in the first tab, switch to other tab and then come back to the first tab. However, inputs are no longer marked as invalid (no red border and no error label). I would like to invoke validation in the route code block after user switches tab. Please advise how to do that.
Thanks!

Aint there radio button support?

On the list of controls, I didn't find radio buttons.
Aint this implemented or not documented?
How can I implement it?

How run tests?)

Hi! I am really can not run your test....
@asaf
Check it: http://monosnap.com/image/yTYMQiL4dLtbiVBcBCVumuKvdASgBa

Can't use in my App with Ember 1.7.0

Trying to use ember-components in my app (Ember 1.7.0) causes different errors;
for example with the tab component (simple) i get:

Assertion Failed: `blockHelperMissing` was invoked without a helper name, which is most likely due to a mismatch between the version of Ember.js you're running now and the one used to precompile your templates. Please make sure the version of `ember-handlebars-compiler` you're using is up to date.
Error: Assertion Failed: `blockHelperMissing` was invoked without a helper name, which is most likely due to a mismatch between the version of Ember.js you're running now and the one used to precompile your templates. Please make sure the version of `ember-handlebars-compiler` you're using is up to date.

With other components I get something like:

Uncaught Error: <App.ItaHomeView:ember360> Handlebars error: Could not find property 'em-accordion' on object <App.HomeController:ember408>.

Is it possible to use ember-components with the latest ember?

Select control not working in Ember 1.7

Hi,

I have verified that Ember 1.7 causes the Select control to break. I tried implementing the quick example and no options were populated in the dropdown. I change my version of ember to 1.6.1 and it worked just fine.

Support 'type' and 'disabled' input properties

custom submit button

how can i add custom submit button?

Customized css classes.

Customize the cols of horizontal layout

Validation on controller level

Support for validation on controller level would be really nice. Yet validation is only supported on model level.

I have a multistep wizard to enter data for just one model. I need to validate on each step if the data required in this step is provided. Validation on model level does not work for this because it fails on first steps because of data which should be entered later.

I had a short overview in code of ember-forms. Validation is bind to model at several points:

• Bindings in init of Em.Forms.FormControlHelpComponent, Em.Forms.HasPropertyMixin and Em.Forms.HasPropertyValidationMixin
• submit action of Ember.Forms.FormComponent
• disabled property of Ember.Forms.FormSubmitComponent

"undefined is not a function error" in ember-cli Production environment

Ember-forms is working great, but when I run the ember-cli server in production mode I get an Uncaught TypeError: undefined is not a function error. Since this only happens in production, I'm not even sure how to start trying to find the source of this. If I remove ember-forms from my app, it works as normal (except the pages using the forms of course).

I suppose I could turn off minification in the production script to try and find the issue.

I am simply including the globals version in my Brocfile: app.import('vendor/ember-forms/dist/globals/main.js');

Here is a screenshot of the error message which might help: http://inft.ly/fvPryUr

ember-forms isn't working inside handlebar each helper

There seems to be a problem with property binding when using ember-forms inside a handlebar each helper.

This is working fine with Ember.TextField view:

  {{#each person in model.people}}
     {{view Ember.TextField valueBinding="person.firstName"}}
  {{/each}}

This isn't working with em-input helper:

  {{#each person in model.people}}
     {{em-input property="person.firstName" label="First Name" placeholder="Please enter first name."}}
  {{/each}}

I updated your JSBin for demonstrating: http://jsbin.com/pexolude/9/edit

Version inconsistency

I believe the current version is supposed to be 0.3.0, but I can't get that with bower. Looking at bower.json, I see the version is set to 0.0.3. Typo?

Checkbox & Textarea controls

Create a checkbox and textarea controls

Disable label / error display? Add classes to label / error containers?

First of all, thanks to authors for shareing this library, it looks very promising!

1. It would be nice if you could disable label and error fields like that:

{{#em-form model=model}}
    {{em-input property="name" label=false error=false}}
{{/em-form}}

With this configuration I expect only the input element to be drawn. If the validation fails, the input field still get's the error class (which adds nice red border), but the help block with the error message is not drawn.

2. It would be nice if you could configure label and error additional classes like that:

{{#em-form model=model}}
    {{em-input property="name" labelClass="label-big label-shiny" errorClass="background-error-icon"}}
{{/em-form}}

With this configuration I expect label item have label-big label-shiny classes appended to the default classes and error helper block have background-error-icon class appended to the default classes.

Validation optional icons

Support for optional Bootstrap validation icons

Where is the built js file?

It used to be a built plain js file in the dist folder. This is gone now. I installed bower and then ember forms. I have now an ember-forms folder in the bower-components folder but it contains only .caffe files.
It would be nice to have hosted js file. (for example link it to JsBin examples, and for those the old school people -like me- who dont use ember-cli)

I am having a real hard time in understanding Ember-Forms

I am a newbie to ember. I'm using ember-cli and my actions are defined in routes.
I am unable to understan what to pass in model pram of em-form, and my controller nothing defined.

my template is :

    <div class="container">
        {{#em-form form_layout="horizontal" model=model.session action="loginUser"}}
            {{em-input label="Email" property="email"}}
            {{em-input label="Password" property="password"}}
        {{/em-form}}

      <div>
          <p>{{email}}</p><br>
          <p>{{password}}</p>
      </div>
    </div>

any jsfiddle working example would be appreciated

thanks in advance

suggestion: em-labels

It would be really handy to have more flexability with rendering labels. Would it be possible to add em-labels template functionality?