Unable to define easy-form using 1.0.2 with Ember 1.13.1

[ghost]

TypeError: Cannot read property 'Input' of undefined The error is thrown at the last line of this snippet, due to EasyForm not getting defined. This happened after I ran: ember install easy-form-extensions to upgrade from a previous version to 1.0.2. I had already removed lines for ember-easy-form and ember-validations from package.json and bower.json, per your install instructions.

This snippet is from my [app-name].js file:

define('service-front-web/initializers/easy-form', ['exports', 'ember'], function (exports, Ember) {
  'use strict';
  var initialize = function initialize() /* container, app */{
    Ember['default'].EasyForm.Input.reopen({

[sir-dunxalot]

To ensure compatibility with 1.13 and beyond, Ember.EasyForm is not a namespace anymore. This is because the core EasyForm library is not up to date. This addon has temporarily replicated the EasyForm functionality (until Easy Form is updated and we can just wrap that).

As such, instead of reopening EasyForm.Input you should reopen the InputGroupComponent found at ember-easy-form-extensions/components/input-group. You may need to tweak the code inside the initializer. I'm happy to help with that.

At the point at which Easy Form releases a compatible version of their library the InputGroupComponent will be deprecated in favor of EasyForm's version.

[ghost]

Great, thanks. I read your explanation in the readme.MD, but this added detail helps me considerably. I am working now to make the changes. I'll post any help requests here, or close this if I am successful.

[sir-dunxalot]

Sounds great. I will try and clarify the Readme later aswell.

[ghost]

Maybe if you helped me with one, I could get the rest. What code changes need to be done with this reopen?

Ember.EasyForm.Input.reopen({
    errorsChanged: function() {
        this.set('hasFocusedOut', true);
        this.showValidationError();
    },
    classNameBindings: ['wrapperConfig.inputClass', 'wrapperErrorClass'],
    didInsertElement: function() {
        this.addObserver('context.errors.' + this.property + '.@each', this, 'errorsChanged');
    }
});

I'm also needing to call reopen functions of Ember.EasyForm.Error and Ember.EasyForm.Submit. What are the equivalents in your addon? Thanks for help.

[sir-dunxalot]

For the class name bindings array, you can just set a property called className on the input group. This will add the class name set to the component and when an error is present, <className>-error aswell. Basically, the class names are set on the individual components not the config object.

As for errorsChanged, errors are handled by the error field component - see this code. To follow the data up, actions down paradigm, you can just send the showAction from the error field component (see source here)[https://github.com/sir-dunxalot/ember-easy-form-extensions/blob/master/addon/components/input-group.js#L162]. What is your use case here? It's possible that this addon is already doing what you want regarding showing the validation errors.

[sir-dunxalot]

Just to be clear, the error binding was abstracted to the error field component so it could be used on it's own (i.e. you can show validation errors anywhere you like). The input group just handles when to show the validations when the input group is used within a form.

[ghost]

I think I'm starting to get it. The code I posted above alters what happens when an {{input}} helper is inserted in a template?

[ghost]

Why does my code use "Ember.EasyForm" anyway? Would I recode it to use "Ember.EasyFormExtensions" now? Of course, I'm not saying that is the only change I need to make. Just trying to get a handle on it.

[sir-dunxalot]

Ember.EasyForm is an Ember namespace. Ember seems to have chosen a modules route over a namespace route, especially with Ember CLI and the addon ecosystem. It makes it much easier to avoid conflicting namespaces and build for production by including only specific modules.

And no worries, I'm happy to answer any and all questions.

[ghost]

So, I should not rename Ember.EasyForm? Does your addon use this namespace? I am going to try to comment out each call to Ember.EasyForm.____.reopen and see what still works with e-e-f-extensions 1.02 installed.

[sir-dunxalot]

Correct, the namespace doesn't exist at all. Any code referencing Ember.EasyForm or Ember.EasyFormExtensions will break.

[ghost]

Right now I am trying to call reopen of Ember.EasyForm.Input, Ember.EasyForm.Error and Ember.EasyForm.Submit. If Ember.EasyForm doesn't exist anymore, how do I access the Input, Error, and Submit properties? I am researching also. I'm not just asking you for all the answers. :)

[ghost]

You say this: As such, instead of reopening EasyForm.Input you should reopen the InputGroupComponent Does that mean that instead of "Ember.EasyForm.Input.reopen({....." I should be typing "Ember.InputGroupComponent.reopen({...." ? I ask because I tried that, but got an error that InputGroupComponent could not be found in Ember.

[sir-dunxalot]

Not a problem, Jerry - I'm happy to help!

The Ember CLI resolver doesn't allow for one word components, which is why the naming has changed a little:

Ember.EasyForm.Input --> the {{input-group}} component
Ember.EasyForm.Error --> the {{error-field}} component
Ember.EasyForm.Submit --> the {{form-submission}} and {{form-submission-button}} components

This library uses the {{form-submission}} and {{form-submission-button}} components to make it easier to decrease the boilerplate required for forms. That's part of the 'extensions' bit of this library, not the 'easy-form' library bit. You can read about submission in the wiki.

You don't need to reopen any of the above classes in an initializer. The Ember addon API allows you to do this in your app's tree. For example:

// your-app-name/components/input-group.js

import InputGroupComponent from 'ember-easy-form-extensions/components/input-group';

export default InputGroupComponent.extend({
  /* Change the code as if it was a reopen here... */
});

Does that make sense?

[ghost]

I am reading the wiki now, thanks.

[sir-dunxalot]

Fixed with #48 (released as 2.0.0).