I'm trying to use the RobinHerbots / Inputmask library as a custom Angular 5 directive. However, when using the mask, the field not valid because it can not get the value typed. When I take the mask directive, the field takes the value normally.
The policy is as follows:
import {Directive, ElementRef, Input, OnChanges} from '@angular/core';
declare var Inputmask;
@Directive({
selector: '[mascara]'
})
export class MascaraDirective implements OnChanges {
@Input() mascara: any;
constructor(private element: ElementRef) { }
ngOnChanges() {
Inputmask(this.mascara).mask(this.element.nativeElement);
}
}
In HTML it looks like this:
<label>Cep: {{ personForm.get('addressZipcode').value }}</label>
<input type="tel" class="form-control" placeholder="Cep" formControlName="addressZipcode" mascara="99999-999">
How to resolve this situation?