Angular2、inputmask ngModel 绑定

Posted 2023-05-08

【中文标题】Angular2、inputmask ngModel 绑定

【英文标题】：Angular2, inputmask ngModel binding

【发布时间】：2016-11-07 13:11:40

【问题描述】：

我对 ng2 和 inputmask 有一些问题。例如我有这个代码 组件.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>

组件.ts

ngAfterViewInit()   
  let phoneNumberInput = document.getElementById('sender-phone'); 
  let inputmask = new Inputmask('[phone]');  
  inputmask.mask(element);  

输入掩码运行良好。但是我的[(ngModel)] 没有用。有谁知道我该如何解决我的问题？

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

【参考方案1】：

我已经解决了这个问题。

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

您需要使用 InputMask 创建指令

@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]="'[phone]'" (tdInputmaskUnmaskedValue)="val3 = $event">