微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决使用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 举报,一经查实,本站将立刻删除。