由于 CustomValidator 应用于非必需的表单字段，表单无效

Question

我有这个表格:

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

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

由于 CustomValidator 应用于非必需的表单字段，表单无效

Form INVALID due to CustomValidator applied on NON-required form field

angular

angular-reactive-forms