角度4自定义验证器不工作

问题描述：

我正在处理角度4并为component.ts文件中的cgpa验证（如果cgpa小于tahn 2.0或大于4.0）创建了一个自定义验证器，但其不触发但预定义的Validators.required工作正常。角度4自定义验证器不工作

CGPA验证：

function ValidCgpa(cgpa: FormControl): {[s: string]: boolean} { 
    let num = Number(cgpa); 

    if(num < 2.0 || num > 4.0) { 
    return {invalidCgpa: true}; 
    } 
}

定制CGPA验证调用

this.educationalDetailsForm = new FormGroup({ 
    cgpa: new FormControl('', Validators.compose([Validators.required, ValidCgpa])) 
});

HTML代码

<input type="text" formControlName="cgpa" placeholder="CGPA"> 

<div *ngIf="educationalDetailsForm.hasError('ValidCgpa','cgpa') && educationalDetailsForm.get('cgpa').touched"> 
    CGPA must be greater than 2.0 and less than 4.0 
</div>

号（CGPA）应数（cgpa.value），或者更简单的：+ cgpa.value。在代码中添加日志或使用调试器可以很容易地找到。如果没有错误，验证器会返回null，而不是未定义的。 –

这是正确的，但他说验证程序没有被调用，所以行是错误的，但这不是问题 – Nickolaus

除此之外，代码是正确的。如果它没有被调用，那么需要一个完整的例子。请参阅http://plnkr.co/edit/XxZw1icOBLUDLtHgVy7V?p=preview。但我的猜测是OP *认为*它没有被调用，因为错误消息没有出现。 –

答

我想你实现验证的方式是错误的，尝试这样的事情（未经测试）：

export function ValidCgpa(nameRe: RegExp): ValidatorFn { 
    return (control: AbstractControl): {[key: string]: any} => { 
    const num = Number(cgpa.value); 
    if(num < 2.0 || num > 4.0) { 
     return {invalidCgpa: true}; 
    } 
    }; 
}

答

我宁愿做在HTML直接的验证如下：

<input type="number" required name="cgpa" [(ngModel)]="cgpaValue" #cgpa="ngModel"> 

<div *ngIf="cgpa.touched && (!cpga.valid || cpga.value < 2 || cpga.value > 4)"> 
    CGPA must be greater than 2.0 and less than 4.0 
</div>

角度4自定义验证器不工作

相关推荐