Two way binding on an input field with formatting - need to force update


#1

I’m using ember 2.2 and I have a form with a phone number input that looks like this:

{{input id="phone-number-c" class="form-control" value=phoneCell }}

I’m binding “phoneCell” to the field so it updates whenever the input is updated. The problem is I want to save the phone as all numbers but format it in the input field. To do that I need to strip the non-numeric characters out, save that to my phoneCell variable and then return the formatted value. The problem with this is that the user can still enter “555-555-5555aaaaaaa” as a valid phone number because i’m disregarding all non numbers. The formatting should remove those characters and rewrite the field but ember isn’t detecting a difference so it never updates the input because technically phoneCell hasn’t changed since i’m stripped non-numbers. Is there a way to force the update in the textbox?

I’ve tried doing this a lot of different ways and they all have their pitfalls. If i just return the “value” from the SET method, then the formatting never takes place.

My Component code is below:

export default Ember.Component.extend(EmberValidations, {
  phoneCell: Ember.computed('rep.phoneCell', {
    get(key) {
      var phone = this.get('rep').get('phoneCell');
      return this._formatPhone(phone);
    },
    set(key, value) {
      var phoneNumOnly = value.replace(/\D/g, '');
      this.get('rep').set('phoneCell', phoneNumOnly);
      return this._formatPhone(phoneNumOnly);
    }
  }),
  _formatPhone:function(phone){
    if(phone.replace(/\D/g,"").length === 10){
      phone = phone.replace(/\D/g, '').replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3");
    }
    return phone;
  }
  ...
})

I’m pretty stuck here. Anyone have any other ideas? This shouldn’t be this hard. I just need to somehow force an update each time the property is updated even though the phoneCell object hasn’t technically changed since i’m removing non-numeric characters.


#2

Maybe my solution is just wrong. Anyone have any ideas?


#3

How I’ve usually handled this is when the input is focused, the input value is raw model value. When the input is blurred, the value is formatted. This eliminates the complexity of having to format and reverse the format since you maintain two separate states.