2

Ich habe ein Problem mit ng2 und Eingabemaske. Zum Beispiel habe ich diesen Code component.htmlAngular2, Eingabemaske ngModel Bindung

gut
<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); 
} 

Inputmask arbeitet hatte. Aber meine [(ngModel)] hat nicht funktioniert. Weiß jemand, wie ich mein Problem lösen kann?

Mein Code zum Beispiel http://plnkr.co/edit/F3pob7hH2ZrJv0MDNa9x?p=preview

Antwort

1

Ich habe Entschlossenheit Problem dieses Problem.

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

Sie erstellen müssen Direktive mit 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); 
} 
} 

Und in HTML-Code verwende ich

<input [tdInputmask]="'+7(999)999-99-99'" (tdInputmaskUnmaskedValue)="val3 = $event"> 
Verwandte Themen