Angular2, inputmask ngModel binding

Hello everyone, I have some problem with ng2 ang inputmask. For example I have had this code component.html <div class="form-group col-sm-7"> <label class="control-label" for="sender-phone">Phone *</label> <input type="text" [(ngModel)]="sender.phone" class="form-control" id="sender-phone" placeholder="Phone"> </div> component.ts ngAfterViewInit() { let phoneNumberInput = document.getElementById('sender-phone'); let inputmask = new Inputmask('[phone]'); inputmask.mask(element); }

Inputmask is working good. But my [(ngModel)] didn’t work. Anyone know how I can resolve my issue ?

My code for example http://plnkr.co/edit/F3pob7hH2ZrJv0MDNa9x?p=preview

[gregmagolan]

And this is a similar directive for restrict input:

import {Directive, ElementRef, Input, Optional} from '@angular/core';
import {NgControl} from '@angular/forms';

@Directive({
  selector: '[restrictInput]',
})
export class RestrictInputDirective {
  private regexMap: { [key: string]: string } = {
    'integer': '^[+-]?[0-9]*$',
    'positive-integer': '^[0-9]*$',
    'float': '^[+-]?([0-9]*[.])?[0-9]+$',
    'positive-float': '^([0-9]*[.])?[0-9]+$',
    'amount': '^[+-]?([0-9]*[.])?[0-9]?[0-9]?$',
    'positive-amount': '^([0-9]*[.])?[0-9]?[0-9]?$',
    'words': '([A-z]*\\s)*',
  };

  @Input('restrictInput')
  mask: any;

  @Input('restrictInputOptions')
  options: any;

  constructor(
    private elementRef: ElementRef,
    @Optional() private control: NgControl,
  ) {}

  ngOnChanges(): void {
    if (!this.control) {
      console.warn('No control for RestrictInputDirective');
      return;
    }

    if (this.mask) {
      let options: any = _.clone(this.options) || {};
      _.defaults(options, { showMaskOnHover: false, placeholder: '' });
      options.regex = this.regexMap[this.mask] || this.mask;
      options.oncomplete = options.onincomplete = options.oncleared = () => this.handleChange();
      Inputmask(options).mask(this.elementRef.nativeElement);
    } else {
      Inputmask.remove(this.elementRef.nativeElement);
    }
  }

  private handleChange(): void {
    this.control.control.patchValue(this.elementRef.nativeElement.value);
  }
}

Usage like so:

<input formControlName="cost" placeholder="Cost" restrictInput="positive-amount">

[qwding]

I use inputmask through primeng(http://www.primefaces.org/primeng/#/mask). I decided to use it later until it is fixed. thx~