Angular2,inputmask ngModel绑定

问题描述:

我对ng2和inputmask有一些问题。例如,我有过这样的代码 component.htmlAngular2,inputmask ngModel绑定

<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('+7(999)999-99-99'); 
    inputmask.mask(element); 
} 

输入掩码工作良好。但我的[(ngModel)]没有工作。任何人都知道我可以如何解决我的问题?

我的例如http://plnkr.co/edit/F3pob7hH2ZrJv0MDNa9x?p=preview

代码,我有这个问题的解决问题。

http://plnkr.co/edit/tN6y5d2fsl0b7cRq6Prv?p=preview

您需要输入掩码

@Directive({ selector: '[tdInputmask]' }) 
export class InputmaskDirective { 
@Output('tdInputmaskUnmaskedValue') unmaskedValueEmitter = new EventEmitter(); 

@Input() set defaultValue (value: string) { 
    //this._defaultColor = colorName || this._defaultColor; 
} 

@Input('tdInputmask') mask: string; 

private el: HTMLElement; 
constructor(el: ElementRef) { 
    this.el = el.nativeElement; 
} 

ngAfterViewInit() { 
    let inputmask = new Inputmask(this.mask); 
    let elementCallback =() => { 
     if (this.el.inputmask) { 
      this.unmaskedValueEmitter.emit('7' + this.el.inputmask.unmaskedvalue()); 
      //if (!this.el.inputmask.isComplete()) { 
      // this.el.parentElement.classList.add('has-error'); 
      //} else { 
      // this.el.parentElement.classList.remove('has-error'); 
      //} 
     } 
    }; 

    inputmask.opts.oncomplete = elementCallback; 
    inputmask.opts.onincomplete = elementCallback; 
    inputmask.opts.onBeforePaste = (pastedValue: string) => { 
     if (pastedValue[0] == '7' || pastedValue[0] == '8') { 
      return pastedValue.slice(1); 
     } 
     return pastedValue; 
    }; 
    inputmask.mask(this.el); 
} 
} 

而在HTML代码中,我使用

<input [tdInputmask]="'+7(999)999-99-99'" (tdInputmaskUnmaskedValue)="val3 = $event"> 
创建指令