angular 4自定义验证器不工作

我正在使用angular 4，如果component.ts文件中的cgpa小于tahn 2.0或大于4.0，但它没有触发，但预定义的validator.required工作正常，则为cgpa验证创建了一个自定义验证器

Cgpa验证程序：

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

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

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>

---

我认为您实现验证器的方式是错误的，请尝试以下未经测试的方式：

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>

这样

自定义验证器

import { AbstractControl } from '@angular/forms';

export function ValidateGpa(control: AbstractControl) {
  const num = Number(control.value);
  if (num < 0 || num > 4.0) {
    return { invalidGpa: true };
  }
  return null;
}

---

试试这个

numbercpa应该是numbercpa.value，或者更简单的：+cgpa.value。在代码中添加日志，或者使用调试器，可以很容易地找到日志。当没有错误时，验证器也会被设置为返回null，而不是未定义。没错，但他说验证器没有被调用，所以行是错误的，但这不是问题所在。除此之外，代码是正确的。如果没有调用，则需要一个完整的示例。看见但是我的猜测是OP认为它没有被调用，因为错误消息没有出现。

import { AbstractControl } from '@angular/forms';

export function ValidateGpa(control: AbstractControl) {
  const num = Number(control.value);
  if (num < 0 || num > 4.0) {
    return { invalidGpa: true };
  }
  return null;
}

<h1>Type here and Check</h1>
<input type="text"  [formControl]="gpa">
<br>
<div *ngIf="gpa.errors?.invalidGpa">Invalid GPA value</div>

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { ValidateGpa } from './validators/valid-gpa.validator';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {

  gpa = new FormControl('', [Validators.required, ValidateGpa]);
}