add class="form-control" to all <input>, <textarea>, <select>

[lhwong]

Hi,

I'd like to add class="form-control" to all <input>, <textarea>, <select> and etc.. I set inputClass but it doesn't work. It does work for parent div (class="form-group") when setting inputGroupClass. I am using 1.0.0.beta.

import EasyFormService from 'ember-easy-form-extensions/services/easy-form';

export default EasyFormService.extend({
  errorClass: 'error',
  hintClass: 'hint',
  inputClass: 'form-control',
  inputGroupClass: 'form-group',
  formWrapperClass: 'form',
  formControlsClass: 'controls',
});

Regards, Nick

[sir-dunxalot]

Sorry for the issue, Nick. It appears that the {{input-field}} component does not have the correct classNameBinding. I'll get a fix up as soon as possible but will, of course, accept a PR.

As a hotfix you can do:

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

import Ember from 'ember';
import InputFieldComponent form 'ember-easy-form-extensions/components/input-field';

export default InputFieldComponent.extend({
  classNames: ['form-control'],
});

[lhwong]

Duncan,

Thanks for your reply.

The hotfix doesn't work for me. Below is my input-group:

{{input-group value=model.message label="Greeting"}}

I check the source code. The classNames is not being used in any part of the code.

// ember-easy-form-extensions/addon/components/input-field.js

import Ember from 'ember';
import layout from '../templates/components/input-field';

export default Ember.Component.extend({
  layout: layout
});

// ember-easy-form-extensions/addon/templates/components/input-field.hbs

{{yield}}

[sir-dunxalot]

Ok, thanks for the additional info. I'll get the fix up soon. Are you sure the hotfix doesn't work? You can import the addon's component into your app tree and overwrite any functionality you like at a module with the same name - as above.

[lhwong]

Hi, This is what I am doing now.

{{input-group value=field.value  label=field.label type="select" inputClass="form-control"}}

//app/templates/form-inputs

{{view 'select'
  id=inputId
  content=content
  name=name
  value=value
  selection=selection
  prompt=prompt
  disabled=disabled
  required=required
  invalid=isInvalid
  class=inputClass
}}

Regards, --Nick

[sir-dunxalot]

Fixed with #37