TypeScript React validation, array with fieldname as key

Question

I'm trying to validate a form with react. Having main Controller, which has the model and handles the actual validation. Passing down model to child controllers, as well the validation errors.

How can i create an array which contains these errors, the array has a key which is a field name in the model, and value is the validation error message. I want to bind the models field names to the error message. Class for example what im looking for.

export class Model {
   SampleNumber: number;
   SampleString: string;
   Errors: [keyof Model, string];
}

Or is there a preferred way of handling validation messages in React with typescript.

Arrays don't have keys - you need to use an object for Errors if you want it to be contain key-value pairs. — Joe Clay
– Joe Clay, Commented Oct 29, 2018 at 11:13

Joe Clay · Accepted Answer · 2018-10-29 11:32:08Z

1

Firstly, arrays don't have keys - you need to use an object for Errors if you want it to be contain key-value pairs.

If you want to specify the type of an object's keys, you'd use an index signature, like so:

export class Model {
    SampleNumber: number;
    SampleString: string;
    Errors: { [x: string]: string };
}

However, you can't currently use keyof Model alone in an index signature - you need to use a 'mapped type' instead, by specifying field in keyof Model. You can then combine this with the Partial mapped type to make it so not every field has to be present.

export class Model {
    SampleNumber: number;
    SampleString: string;
    Errors: Partial<{ [field in keyof Model]: string }>;
}

let model: Model = {
    SampleNumber: 1,
    SampleString: "",
    Errors: { SampleNumber: "error" }
};

edited Oct 29, 2018 at 11:32

answered Oct 29, 2018 at 11:20

Joe Clay

36.1k6 gold badges94 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

TypeScript React validation, array with fieldname as key

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related