Bypassing TS1337 for custom form validators in angular TS version 3.8

Question

I am writing my own custom form validators for angular with the following template.

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

Instead of key:string I want to only allow a range of items from a defined enum.

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

export type FormError = keyof typeof FormErrorEnum;

If I try to use either [key: FormError]: any or [key in FormError]:any I will get one of two errors.

[key: FormError]: any results in a TS1337. [key in FormError]:any results in the return (customError: {param,param2} being refused as it does not include all entires in the enum.

I have already looked in this thread. TS version is 3.8 - upgrading is an option.

Mihályi Zoltán · Accepted Answer · 2020-08-05T19:07:38.900

3

You can use literal types instead of enums.

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

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

The return type in your customFunction should be:

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

If you allow exactly one property of FormError:

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

The idea behind this is: Create the required type for each key: { [K in P]: any }. Put them in a map: { [P in FormError]: {...} }. Get the values of the map: [FormError]

edited Aug 05 '20 at 19:07

answered Aug 05 '20 at 16:08

Mihályi Zoltán

822
6
11

Sorry but this does not work. This gives me the same errors as listed above. Can you show me an example using the `customFunction` where it returns an object using one of these types? – Questioning Aug 05 '20 at 16:11
Do you want to allow multiple keys ({ unknown: {...}, customError: {...}} and no keys ({})? Or exactly one key is the preferred? – Mihályi Zoltán Aug 05 '20 at 16:22
Allow multiple but it should not be required. – Questioning Aug 05 '20 at 16:38
Out of interest if I only wanted 1 of the items what would that look like? – Questioning Aug 05 '20 at 18:29
Any way to extend the `ErrorResult` type created in last code block? – SepSol Jun 13 '23 at 19:32

Bypassing TS1337 for custom form validators in angular TS version 3.8

1 Answers1