angulaire 4 validateur personnalisé ne fonctionne pas

Question

Je travaille sur angulaire 4 et créé un validateur personnalisé pour la validation cgpa (si le cgpa est moins tahn 2.0 ou plus grand que 4.0) dans le fichier component.ts mais ce n'est pas le déclencheur mais le Validators.required prédéfini fonctionne correctement.

ACMG Validator:

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

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

sur mesure ACMG Validator Appel

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

Code 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> 

Answer 1

Je pense que la façon dont vous inséré le validateur ne va pas, essayer quelque chose comme ça (non testé):

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

Answer 2

Je préférerais faire les validations sur le code HTML directement comme suit:

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