首页 > 解决方案 > 在 Angular TS 版本 3.8 中为自定义表单验证器绕过 TS1337

问题描述

我正在使用以下模板为 Angular 编写自己的自定义表单验证器。

static customFunction(param: number, param2: string): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } => {
    return { customError: {param, param2} };
  };
}

而不是key:string我只想允许定义的枚举中的一系列项目。

export enum FormErrorEnum {
  unknown = 'unknown',
  customError = 'customError',
}

export type FormError = keyof typeof FormErrorEnum;

如果我尝试使用其中任何一个,[key: FormError]: any否则[key in FormError]:any我会得到两个错误之一。

[key: FormError]: any结果是 TS1337。 [key in FormError]:any导致返回 (customError: {param,param2}被拒绝,因为它不包括枚举中的所有整数。


我已经看过这个线程。TS 版本是 3.8 - 升级是一个选项。

标签: angulartypescript

解决方案


您可以使用文字类型而不是枚举。

export type FormError  = 'unknown' | 'customError';

const error1: FormError = 'unknown'; // ok
const error2: FormError = 'illegal'; // error

您的 customFunction 中的返回类型应该是:

type ErrorResult = {
    [P in FormError]?: any;
};

如果您只允许 FormError 的一个属性:

type ErrorResult = {
    [P in FormError]: { [K in P]: any };
}[FormError];

这背后的想法是:为每个键创建所需的类型:{ [K in P]: any }. 将它们放在地图中:{ [P in FormError]: {...} }. 获取地图的值:[FormError]


推荐阅读