Angular - 输入 '(c: FormControl) => ValidationError | null' 不可分配给类型 'ValidatorFn'

Question

在Angular-13 我有这个代码

验证-errors.ts:

import { ValidationErrors } from "@angular/forms";
import { FormArray, FormControl, FormGroup, ValidatorFn } from '@angular/forms';

// Defines a stronger typed validation error model, compatible with the Angular default.
export interface ValidationError extends ValidationErrors {
    [validatorName: string]: {
        message: string
    }
}

validation.component.ts :

import { ValidationError } from '../models/validation-error';

export class CustomValidators {
  static requiredMinNumber(min: number): ValidatorFn {
    return (c: FormControl): ValidationError | null => {
      if (this.isEmpty(c.value))
        return this.makeError('requiredMinNumber', `You must provide a number of at least ${min}.`);
      else if (!this.isNumber(c.value))
        return this.makeError('requiredMinNumber', `Value must be a number, and minimum ${min}.`);
      else if (c.value < min)
        return this.makeError('requiredMinNumber', `The minimum accepted value is ${min}.`);
      return null;
    };
  }
}

但是出现了这个错误：

Type '(c: FormControl) => ValidationError | null' is not assignable to type 'ValidatorFn'.
  Types of parameters 'c' and 'control' are incompatible.
    Type 'AbstractControl' is not assignable to type 'FormControl'.ts(

如何解决？

谢谢

Answer 1

要编写自定义验证器，必须遵循ValidationFn interface。

interface ValidatorFn {
  (control: AbstractControl): ValidationErrors | null
}

将 c 更改为 AbstractControl 类型。

static requiredMinNumber(min: number): ValidatorFn {
  return (c: AbstractControl): ValidationError | null => {
    ...
  };
}