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

[mblackritter]

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('+61 (09) 9999 9999');
      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('+61 (09) 9999 9999');
      $('input[name="landline"]').attr('placeholder', '+61 (0_) ____ ____');
      $('input[name="mobile"]').inputmask('+61 (0) 9999 9999');
      $('input[name="mobile"]').attr('placeholder', '+61 (0) ____ ____');
    });
  }
});

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

[mblackritter]

I updated it to also successfully validate the form mask entries and setup a JS Bin.

Thanks to Ember Validations' Format Validation we can easily validate the form masked inputs via regex like this:

          mobile: {
            presence: true,
            format: { 
              with: /^([\+\(\)a-zA-Z ]|\d){17}$/, allowBlank: true, message: 'must be complete number'
            },

[millisami]

Will this feature gets merged?

[toranb]

+1 would love to see this get merged :)