Formily 开源项目教程

Formily 开源项目教程

formily📱🚀 🧩 Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3项目地址:https://gitcode.com/gh_mirrors/fo/formily

项目介绍

Formily 是一个跨设备、高性能的表单解决方案,支持 React、React Native、Vue 2 和 Vue 3。它提供了普通表单、动态(JSON Schema)表单以及表单构建器,旨在通过独立管理字段来实现高性能的表单渲染。Formily 集成了阿里巴巴的 Fusion 和 Ant Design 组件,确保开箱即用,并且支持后端 JSON Schema 和前端 JSchema 的转换。

项目快速启动

安装

首先,你需要通过 npm 或 yarn 安装 Formily:

npm install @formily/core @formily/react

或者

yarn add @formily/core @formily/react

创建一个简单的表单

以下是一个使用 Formily 创建简单表单的示例:

import React from 'react';
import { createForm } from '@formily/core';
import { FormProvider, Field } from '@formily/react';
import { Input, Form, Button } from 'antd';

const form = createForm();

const SimpleForm = () => {
  return (
    <FormProvider form={form}>
      <Form layout="vertical">
        <Field
          name="username"
          title="用户名"
          initialValue="hello world"
          decorator={[Form.Item]}
          component={[Input]}
        />
        <Field
          name="password"
          title="密码"
          decorator={[Form.Item]}
          component={[Input.Password]}
        />
        <Button type="primary" onClick={() => form.submit()}>
          提交
        </Button>
      </Form>
    </FormProvider>
  );
};

export default SimpleForm;

应用案例和最佳实践

动态表单

Formily 支持动态表单,可以通过 JSON Schema 来定义表单结构。以下是一个动态表单的示例:

import React from 'react';
import { createForm } from '@formily/core';
import { FormProvider, createSchemaField } from '@formily/react';
import { Input, Form, Button } from 'antd';

const form = createForm();

const SchemaField = createSchemaField({
  components: {
    Input,
  },
});

const schema = {
  type: 'object',
  properties: {
    username: {
      type: 'string',
      title: '用户名',
      'x-decorator': 'FormItem',
      'x-component': 'Input',
    },
    password: {
      type: 'string',
      title: '密码',
      'x-decorator': 'FormItem',
      'x-component': 'Input.Password',
    },
  },
};

const DynamicForm = () => {
  return (
    <FormProvider form={form}>
      <Form layout="vertical">
        <SchemaField schema={schema} />
        <Button type="primary" onClick={() => form.submit()}>
          提交
        </Button>
      </Form>
    </FormProvider>
  );
};

export default DynamicForm;

表单验证

Formily 提供了强大的表单验证功能,可以通过 schema 定义验证规则:

const schema = {
  type: 'object',
  properties: {
    username: {
      type: 'string',
      title: '用户名',
      'x-decorator': 'FormItem',
      'x-component': 'Input',
      'x-validator': {
        required: true,
        message: '用户名不能为空',
      },
    },
    password: {
      type: 'string',
      title: '密码',
      'x-decorator': 'FormItem',
      'x-component': 'Input.Password',
      'x-validator': {
        required: true,
        message: '密码不能为空',
      },
    },
  },
};

典型生态项目

Form Builder

Form Builder 是 Formily 的一个生态项目,它允许你通过可视化界面快速构建表单。你可以访问 Form Builder 网站 了解更多信息。

Designable

formily📱🚀 🧩 Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3项目地址:https://gitcode.com/gh_mirrors/fo/formily

  • 14
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

霍薇樱Quintessa

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值