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

@craig2005 wrote:

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.

Posts: 1

Participants: 1

Read full topic