I am attempting to get this directive to function with ion input, however, I am facing two challenges that I am unsure how to resolve:
1 - Difficulty loading the mask when the ion-input is displayed - The issue is that the input element only appears as a childNode of nativeElement after some delay, making it difficult to find a suitable hook to implement. In an attempt to resolve this, I have included some code within a setTimeout function to locate the wrapped input:
public ngOnInit():void {
setTimeout(()=>{
this._element=this.findElement();
resolvedPromise.then(() => this._applyValueChanges());
},1000);
}
findElement():any{
if (this._elementRef.nativeElement.tagName === 'INPUT') {
return this._elementRef.nativeElement
} else {
let index;
for(index=0;index<this._elementRef.nativeElement.childNodes.length;index++)
if (this._elementRef.nativeElement.childNodes[index].tagName === 'INPUT')
return this._elementRef.nativeElement.childNodes[index];
}
}
2 - Another issue is that the registerOnChange method is not being called, preventing me from updating the model to remove special characters:
public registerOnChange(fn:any):void {
this._onChange = fn;
return;
}
Therefore, my inquiry is: how can I ensure that registerOnChange functions properly with the ion-input element? Is there a method to locate the wrapped input during onInit without relying on a setTimeout?