自定义 Angular 验证器与输入掩码冲突答案

【问题标题】：Custom Angular validator conflicts with Input mask自定义 Angular 验证器与输入掩码冲突
【发布时间】：2018-10-04 13:07:03
【问题描述】：

我创建了以下 Angular 5 验证器：

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

这个验证器运行良好，除非我将它与应用输入掩码 (https://github.com/RobinHerbots/Inputmask) 的自定义指令一起使用。

指令如下：

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 type="text" class="form-control" placeholder="CPF" formControlName="cpf" mascara="999.999.999-99">

可能出了什么问题？

编辑：

添加表单生成器：

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],
});

【问题讨论】：

您可以粘贴您的验证码吗？哪里不行？
@SandipJaiswal 我编辑了问题并添加了更多信息
将此代码粘贴到 html 中并查看结果：
结果：{{ personForm.get("cpf").valid }} 并调试您的validationService，它是否真的给出了null 或{ cpfInvalido: true}
没有输入掩码，无效时结果为假，有效时结果为真。使用输入掩码，结果永远是错误的。在仅使用必需验证器的其他字段中也会发生同样的情况。这让我相信问题出在面具本身，但我不知道如何解决。

【解决方案1】：

我通过如下更改指令解决了这个问题 (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);
    }
}

【讨论】：