是否可以将 `class-validator` 与 antd `Form.useForm`() 一起使用？

Posted 2023-02-18

【中文标题】是否可以将 `class-validator` 与 antd `Form.useForm`() 一起使用？

【英文标题】：Is it possible to use `class-validator` with antd `Form.useForm`()?

【发布时间】：2022-01-10 11:32:56

【问题描述】：

我用class-validator创建了一个DTO对象：

export class CreateItemDto 
  @IsString()
  @Length(2, 63)
  readonly name: string;

是否可以在 Ant Design 的Form.useForm() 中使用它，或者我必须自己创建如下规则？

const [form] = Form.useForm<CreateItemDto>();

return (
  <Form form=form>
    <Form.Item
      label="Name"
      name="name"
      rules=[
        required: true,
        message: t('Please enter correct name'),
        min: 2,
        max: 63,
      ]
    >
      <Input />
    </Form.Item>
  </Form>
)

【参考方案1】：

我认为 antd 默认不支持使用class-validator 验证表单。您可以尝试手动运行 class-validator validate 函数并通过自定义验证器规则将其连接以形成规则。

https://codesandbox.io/s/registration-antd-4-17-3-forked-5x92w?file=/index.js:0-1142

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import  Form, Input  from "antd";
import  validate  from 'class-validator';
import  CreateItemDto  from "./CreateItemDto";

const RegistrationForm = () => 
  const [form] = Form.useForm();

  return (
    <Form
      form=form
      name="register"
    >
      <Form.Item
        name="name"
        label="Name"
        hasFeedback
        rules=[
          
            validator: async (_, value) => 
              const dto = new CreateItemDto(
                name: value
              );

              let errors = await validate(dto, 
                skipMissingProperties: true
              );

              if (errors?.length > 0) 
                console.log(errors);
                return Promise.reject(new Error('Validation errors'));
               else 
                return Promise.resolve();
              
            
          
        ]
      >
        <Input />
      </Form.Item>
    </Form>
  );
;

ReactDOM.render(<RegistrationForm />, document.getElementById("container"));

import 
  Length,
  IsString
 from 'class-validator';

export class CreateItemDto 
  @IsString()
  @Length(2, 4)
  name: string;

  constructor( name :  name: string) 
    this.name = name;