使用CombineValidators用于SelectInput来验证Guid.Empty

问题描述

我正在寻找一种在React App中提交最终表单之前验证Select Input的方法，我在下面尝试了一下，但没有成功： 当我打印句柄中的每个提交的值是：00000000-0000-0000-0000-000000000000 当Guid为空时如何添加验证错误

在最终表单文件中添加react .tsx：

const validate = combineValidators({
  projectId: isRequired("The project"),achievementStageId: isRequired("The project item achievement stage"),projectItemStatusId: isRequired("The project item status"),});

<Form onSubmit={handleSubmit} loading={loading}>
                <Field
                  name="projectId"
                  placeholder="Select Project"
                  component={SelectInput}
                  options={projectsDdl}
                  multiple={true}
                />
                <Field
                  name="achievementStageId"
                  placeholder="Select Achievement Stage"
                  component={SelectInput}
                  options={achievementStagesDdl}
                  multiple={true}
                />
                <Field
                  name="projectItemStatusId"
                  placeholder="Select Project Item Status"
                  component={SelectInput}
                  options={projectItemStatusDdl}
                  multiple={true}
                />

projectsDdl，achievementStagesDdl，projectItemStatusDdl作为API中的数组

和component = {SelectInput}

import React from "react";
import { FieldRenderProps } from "react-final-form";
import { FormFieldProps,Form,Label,Select } from "semantic-ui-react";

interface IProps extends FieldRenderProps<string,any>,FormFieldProps {}

const SelectInput: React.FC<IProps> = ({
  input,width,options,placeholder,meta: { touched,error },}) => {
  return (
    <Form.Field error={touched && !!error} width={width}>
      <Select
        value={input.value}
        onChange={(e,data) => input.onChange(data.value)}
        placeholder={placeholder}
        options={options || []}
      />
      {touched && error && (
        <Label basic color="red">
          {error}
        </Label>
      )}
    </Form.Field>
  );
};

export default SelectInput;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）