由于在非必填表单字段上应用了 CustomValidator，表单无效

Posted 2023-03-13

【中文标题】由于在非必填表单字段上应用了 CustomValidator，表单无效

【英文标题】：Form INVALID due to CustomValidator applied on NON-required form field

【发布时间】：2022-01-22 04:45:47

【问题描述】：

我有这个表格：

    this.form = new FormGroup(
        someField: new FormControl(''),
        someOtherField: new FormControl(''),
        cpf: new FormControl('', [ CustomFormValidators.isValidCPF ]),
    );

还有这个CustomValidator：

    static isValidCPF(control: AbstractControl): ValidationErrors | null 
    
        const cpf: string = String(control.value);
        const validCPF = CustomFormValidators.sanitizeCPF(cpf);
    
        if ( CustomFormValidators.validateCPF( validCPF ) ) return null; //Success
            
        return  isValidCPF: true ; //Error
    

我的问题是：

在我的表单中，CPF 字段不是必需的，因此用户可以将其留空。 但是我的 CustomValidator 触发了错误，因此我的表单无效，并且 否则不会提交。

我尝试将这个条件放在方法上，但没有成功：

    if(!control.value)
            if(control.errors && !control.errors.hasOwnProperty('required'))
            return null;
        
    

附加信息：

下面的代码以防万一。但它没有损坏或错误。它可以 100% 完美运行。它可能在变量名上有拼写错误，因为我不得不改变这个问题。但下面的代码不是问题

    private static sanitizeCPF(cpf): string
        return cpf.replace(/[^\s\d\ ]*[\s]?[\s\\\^]?/g,'');
    
        
    private static validateCPF(cpf: string, verifier?): boolean 
        let sum = 0;
        let rest;
        const x = verifier ? 0 : 1;
    
        for (let i = 1; i <= (9 + x); i++)
            sum = sum + parseInt(cpf.substring(i-1, i)) * ((11 + x) - i);
        
        rest = (sum * 10) % 11;
    
        if ((rest == 10) || (rest == 11))  rest = 0; 
        if (rest != parseInt(cpf.substring((9 + x), (10 + x))) )  return false; 
    
        if(!verifier)  return CustomFormValidators.validateCPF(cpf, true); 
    
        return true;
    

【参考方案1】：

在 Angular 中，通常不验证空输入 - 因为这是必需的验证器的工作。

输入为空时直接跳过验证：

static isValidCPF(control: AbstractControl): ValidationErrors | null 
     
  
    const cpf: string = String(control.value);
    // -------------
    if (!cpf) return null;
    // -------------
    const validCPF = CustomFormValidators.sanitizeCPF(cpf);

    if ( CustomFormValidators.validateCPF( validCPF ) ) return null; //Success
        
    return  isValidCPF: true ; //Error