title: Masking Phone in Ember JS
body: <p>I am trying to mask a Phone number in a input field, can somebody please help me in this regards. Here is my code for the html (or .hbs file)</p>
  <pre><code>        &lt;label class=&quot;control-label&quot;&gt;Phone&lt;/label&gt;
          {{masked-input mask='(999) 999-9999' 
                         value=model.Address.Phone 
                         input-format='regex' 
                         input-filter='\(*[0-9]{3}\) [0-9]{3}-[0-9]{4}' 
                         input-filter-message='Phone number is not valid.' 
                         class='form-control phone masked' 
                         maxlength=&quot;14&quot;}}
      &lt;/div&gt;
  </code></pre>
  <p>And my component definition is as below:</p>
  <pre><code>export default () =&gt; {
      IMS.registerComponent(&quot;masked-input&quot;, {
          tagName: 'input',
          attrParams: ['required', 'title', 'name', 'placeholder'],
          loaded: false,
          prop: Ember.observer(
              'required',
              'title',
              'name',
              'placeholder',
              'value',
              function () {
                  var scope = this;
                  $(this.element).val(Ember.get(scope, 'value'));
                  var stamp = new Date();
                  if (Ember.get(scope, 'loaded') == true) {
  
                      var element = $(this.element);
                      var attrs = Ember.get(this, 'attrParams');
                      attrs.forEach(function (attr) {
                          var value = Ember.get(scope, attr);
                          if (value == '' | value == null) {
                              element.removeAttr(attr);
                          } else {
                              element.attr(attr, value);
                          }
                      })
                  }
              }),
          observeMask: Ember.observer('mask', function () {
              var scope = this;
              $(this.element).inputmask({
                  mask: Ember.get(scope, 'mask')
              });
          }),
          didInsertElement: function () {
              var scope = this;
  
              setTimeout(function () {
                  var value = Ember.get(scope, 'value');
                  var element = $(scope.element);
                  var change = function () { Ember.set(scope, 'value', element.val()); }
                  element.val(Ember.get(scope, 'value'));
                  element.attr('type', 'text');
                  element.change(change);
                  Ember.set(scope, 'loaded', true);
                  scope.observeChanges();
                  element.inputmask({
                      mask: Ember.get(scope, 'mask')
                  });    
                  element.attr('input-format', Ember.get(scope, 'input-format'));
                  element.attr('input-filter', Ember.get(scope, 'input-filter'));
                  element.attr('input-filter-message', Ember.get(scope, 'input-filter-message'));    
              }, 250);
          }
      })
  }
  </code></pre>