Custom Angular validator conflicts with Input mask

Question

I've created the following Angular 5 validator:

import {AbstractControl} from '@angular/forms';
import * as cpf from '@fnando/cpf';

export class Validador {

    static cpf(control: AbstractControl): { [key: string]: any } {
        // https://github.com/fnando/cpf
        return cpf.isValid(control.value) ? null : {cpfInvalido: true};
    }
}

This validator works perfectly, except when I uso it together with a custom directive that applies Input mask (https://github.com/RobinHerbots/Inputmask).

The directive is the following:

import {Directive, ElementRef, Input, OnInit} from '@angular/core';

declare var Inputmask;
@Directive({
  selector: '[mascara]'
})
export class MascaraDirective implements OnInit {

    @Input() mascara: any;
    constructor(private element: ElementRef) { }

    ngOnInit() {
        Inputmask({ // https://github.com/RobinHerbots/Inputmask
            mask: this.mascara,
            skipOptionalPartCharacter: ' '
        }).mask(this.element.nativeElement);
    }
}

Input with mask directive (the mask works, but validation stops working because can't handle the input value):

<input type="text" class="form-control" placeholder="CPF" formControlName="cpf" mascara="999.999.999-99">

What could be wrong?

EDIT:

Adding the form builder:

this.personForm = this.fb.group({
  name: ['', Validators.required],
  cpf: ['', [Validators.required, Validador.cpf]],
  phone: ['', Validators.required],
  email: ['', [Validators.required, Validators.email, Validators.pattern('^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$')]],
  password: ['', Validators.required],
  addressStreet: ['', Validators.required],
  addressNumber: ['', Validators.required],
  addressZipcode: ['', Validators.required],
  addressNeighborhood: ['', Validators.required],
  addressObservation: ['', Validators.required],
  idState: [null, Validators.required],
  addressCity: ['', Validators.required],
});

Answer 1

I solved it by changing the directive as follows (https://github.com/RobinHerbots/Inputmask/issues/1317#issuecomment-341872101)

import {Directive, ElementRef, Input, OnChanges, Optional} from '@angular/core';
import {NgControl} from '@angular/forms';
import * as _ from 'lodash';

declare var Inputmask;
@Directive({
  selector: '[mascara]'
})
export class MascaraDirective implements OnChanges {

    @Input() mascara: any;
    @Input('mascaraParams') options: any;
    constructor(private element: ElementRef, @Optional() private control: NgControl) { }

    ngOnChanges(): void { 
        if (!this.control) {
            console.warn('No control for InputMaskDirective');
            return;
        }

        if (this.mascara) {
            const options: any = _.clone(this.options) || {};
            _.defaults(options, { showMaskOnHover: false });
            options.oncomplete = options.onincomplete = options.oncleared = () => this.handleChange();
            Inputmask(this.mascara, options).mask(this.element.nativeElement);
        } else {
            Inputmask.remove(this.element.nativeElement);
        }
    }

    private handleChange(): void {
        this.control.control.patchValue(this.element.nativeElement.value);
    }
}