Question

我正在尝试使用react验证表单。具有主控制器，该控制器具有模型并处理实际的验证。将模型传递给子控制器，以及验证错误。

我如何创建一个包含这些错误的数组，该数组具有一个键，该键是模型中的字段名称，而值是验证错误消息。我想将模型字段名称绑定到错误消息。类例如什么即时通讯寻找。

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

或者有没有一种更好的方法来处理带有Typescript的React中的验证消息。

Answer 1

首先，数组没有键-如果希望对象包含键值对，则需要对错误使用对象。

如果要指定对象键的类型，请使用索引签名，如下所示：

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

但是，您目前不能在索引签名中单独使用keyof Model-您需要通过指定field in keyof Model来使用'mapped type'。然后，您可以将其与Partial映射类型结合使用，以使并非每个字段都必须存在。

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

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

TypeScript React验证，以字段名称为键的数组

1 个答案: