In angular-imask how do I get the IMask class?

Question

Using Angular-IMask, I'm programatically updating the field that has IMask. So I'm getting the error:

"Element value was changed outside of mask. Syncronize mask using mask.updateValue() to work properly."

I programatically change the input because I have a datepicker associated with it (NgbDatepicker component from Angular-Bootstrap ng-bootstrap module).

How can I get imask object so I can call updateValue() ? I set the component only on the template, so I don't have any object in the component I can access.

Is there any other way to remove that message besides acessing IMask object ? if there is please let me know.

Answer 1

You can get the IMask instance by querying for the imask directive by using the ViewChild property decorator and then you can access the IMask instance from the directive via the maskRef property.

i.e.

@Component({
  template: `
    <input type="text"
        [imask]="maskConfig"
    >
  `,
})
export class MyMaskComponent {
  maskConfig = {...}

  @ViewChild(IMaskDirective, { static: false })
  iMask: IMaskDirective<IMask.MaskedNumber>;

  ngAfterViewInit(): void {
    this.iMask.maskRef.updateValue();
  }
}

Answer 2

You can use ViewChild for this component or use ngOnChanges from Angular LifeCycle and filter for this refeered change to get the current object.