Formily入门实战之表集成与场景示例

2024-01-23 03:06:09

Formily简介

Formily是一个基于MVVM原理构建的动态化表单解决方案，它可以帮助开发者快速构建复杂的表单。Formily提供了丰富的UI组件库，可以满足各种表单需求。

Formily有以下几个特点：

动态化表单： Formily可以根据数据动态生成表单，无需手动编写代码。
数据绑定： Formily支持多种数据绑定方式，包括单向绑定、双向绑定和单向流绑定。
丰富的UI组件库： Formily提供了丰富的UI组件库，可以满足各种表单需求。
性能优越： Formily采用虚拟DOM技术，性能优越。

Formily快速入门

安装

npm install formily --save

使用

import { createForm } from 'formily';

const form = createForm();

form.addField({
  name: 'name',
  label: '姓名',
  type: 'string',
  required: true,
});

form.addField({
  name: 'age',
  label: '年龄',
  type: 'number',
  min: 0,
  max: 100,
});

form.on('submit', (values) => {
  console.log(values);
});

form.render(document.getElementById('root'));