超越基本表单：为什么企业级表单仍然是一个挑战（以及 FormML 如何解决它）-js教程-PHP中文网

Beyond Basic Forms: Why Enterprise-Level Forms Remain a Challenge (and How FormML Solves It)

表单在数字世界中无处不在，从简单的新闻通讯注册到复杂的企业应用程序。虽然基本表单可以使用 Formik 或 React Hook Form 等流行工具轻松处理，但企业级表单仍然面临着重大挑战现有解决方案难以解决。

什么是企业级表单？

企业级表单不仅仅是简单的输入字段和提交按钮。它们是金融、银行和保险等行业复杂工作流程的支柱。这些表单必须平衡高级功能、可扩展性和用户体验，使它们与简单的对应形式有根本的不同。

企业级表单示例

贷款申请：动态计算利率、每月付款和债务收入比实时。他们必须根据信用评分和收入验证要求执行监管合规规则，例如最高贷款金额。
税务申报：多页表格，可处理不同收入来源、扣除额和抵免。他们需要根据税务机关规则进行验证，支持在多个会话中保存草稿，并指导用户完成复杂的工作流程，例如逐项扣除与标准扣除。
保险索赔
：根据索赔类型（汽车、房屋、人寿）和保单详细信息进行调整的复杂表格。他们使用现有客户数据预填充字段，处理文件附件作为证据，实施复杂的验证规则（例如，索赔金额不能超过保单限制），并在各种保险产品之间保持一致的品牌，以将其与竞争对手区分开来.

这种关键任务但成本高昂的表单就是我所说的“企业级表单”。

构建

企业级

表单的挑战假设您是一家构建在线贷款申请表的金融公司。您可能面临哪些挑战？

非技术利益相关者的参与：贷款很复杂，涉及金融、会计和法律领域的专业知识——这些专业知识通常由非技术利益相关者掌握。这些利益相关者了解复杂的业务规则，例如“如果申请人的信用评分低于650，则需要共同签名人”或“使用每月总收入除以计算债务与收入比率”每月总债务支付“。一个重大挑战是使这些利益相关者能够有效地领导表单设计，而无需花费过多的时间教授开发人员所有规则，同时确保处理边缘情况的顺利协作。
品牌 UI 和自定义 UX：开发人员也很重要！公司不想要千篇一律的表单设计。每个认真的企业都希望打造自己的品牌并提供独特的用户体验，这些目标需要开发人员的专业知识才能实现。例如，银行可能希望其贷款申请与其品牌颜色相匹配、使用自定义输入组件或实现分步向导界面，引导用户完成 “个人信息”、“雇佣详情”和“贷款条款”。
计算、公式和动态行为：一份贷款申请表可能需要各种复杂的实时计算和动态行为。
- 财务计算：贷款金额、利率、每月付款等
- 条件逻辑：根据贷款类型显示/隐藏字段（例如，抵押贷款与个人贷款的不同字段）
- 跨领域依赖关系：更新收入可能会影响最大贷款金额、债务收入比和利率
- 实时验证：确保贷款金额保持在基于收入和信用评分的政策限额内
自动保存和恢复：复杂的表单可以有数百个字段 - 用户如果不小心关闭浏览器就不想重新开始。
其他技术挑战：
- 性能：以流畅的 UI 响应能力高效处理数百个字段，确保快速计算和无缝渲染
- 验证：全面的验证策略，包括用于即时用户反馈的实时客户端验证和用于数据完整性和安全性的强大服务器端验证
- 数据预填充：从多个数据源填充字段

这些不是特定场景的小众问题，而是企业在构建复杂表单时面临的常见挑战。业务复杂性、技术要求和用户体验需求的结合使得企业级表单的有效实施特别具有挑战性。

现有工具的不足之处

虽然像 Formik 和 React Hook Form 这样流行的表单库非常适合处理基本表单，但它们并不是根据企业需求而构建的。在我们之前讨论的挑战的背景下检查这些工具时，一些局限性变得显而易见：

挑战 1：非技术利益相关者的参与

当前的表单库以开发人员为中心，需要 JavaScript/TypeScript 知识来定义表单逻辑。

这增强了定制能力，但显着降低了交付包含复杂规则的表单的效率。例如：

当表单规则涉及复杂的计算时，利益相关者被迫用诸如“计算最高贷款金额为年收入的4倍”等口头描述向开发者进行一步步解释，如果信用评分低于700，则下调15%，并进一步降低现有每月债务支付占月总收入的百分比，如果就业历史低于700，则额外降低10% 2 年”，尽管这些计算可能是其专业领域的常识。
当表单规则需要修改时，例如调整贷款限额，利益相关者仍然需要依赖开发人员来实施更改，导致流程更长，交付时间延长。

挑战 2：品牌 UI 和定制 UX

两个现有库在这方面都表现出色（由于它们以开发人员为中心性质），提供了强大的定制功能。例如，React Hook Form 提供了一个 Controller 组件来适应受控输入组件。

挑战 3：计算、公式和动态行为

现有的库提供了“just-works”的计算能力，但缺乏复杂计算的抽象和组织能力。

考虑在 React Hook Form 中实现贷款计算器：

function LoanForm() {
  const { watch, setValue } = useForm()

  const [loanAmount, interestRate, term] = watch([
    'loanAmount',
    'interestRate',
    'term',
  ])

  useEffect(() => {
    if (loanAmount && interestRate && term) {
      const monthlyRate = interestRate / 100 / 12
      const months = term * 12
      const payment =
        (loanAmount * monthlyRate * Math.pow(1 + monthlyRate, months)) /
        (Math.pow(1 + monthlyRate, months) - 1)
      setValue('monthlyPayment', payment.toFixed(2))
    }
  }, [loanAmount, interestRate, term, setValue])

  return (
    <form>
      {/* ... */}
      <input type="number" {...register('monthlyPayment')} />
      {/* ... */}
    </form>
  )
}

登录后复制

这种方法有几个缺点：

用 JavaScript 编写：它拒绝非技术利益相关者和开发人员之间的协作。
手动维护字段依赖: watch(['loanAmount', 'interestRate', 'term'])
字段定义与赋值分离：本例中，monthlyPayment 注册在 return 语句中，但赋值在 useEffect 中
额外的样板代码：watch、setValue、useEffect
手动性能优化

挑战 4：自动保存和恢复

这些库中没有用于自动保存和恢复的内置解决方案。实现自动保存功能需要大量的自定义代码。开发人员必须处理：

高效的状态持久化
解决冲突
数据同步
进度跟踪
错误恢复

这些限制给企业应用程序带来了巨大的开发开销、更长的上市时间和更高的维护成本。虽然存在解决方法，但它们通常会导致复杂、脆弱的解决方案，难以维护和扩展。

FormML 通过其专门为企业级表单设计的特定领域语言和架构来解决这些挑战，我们将在下一节中探讨。

FormML 解决方案

FormML，是表单建模语言的缩写，发音为“正式”，是一个新的开源框架，专门为解决企业级表单的挑战而设计。以下是它如何弥补其他工具留下的空白：

赋予非技术利益相关者权力

正如其全名“表单建模语言”所示，FormML 引入了一种直观且非开发人员友好的领域特定语言 (DSL)。其简单的结构、最少的语法和自然的术语使财务专家、法律专业人士和其他非技术利益相关者能够在不需要编程技能的情况下对表单进行建模。

要构建一个最简单的可运行纳税申报表，无需任何编程知识的熟练会计师只需 5 分钟即可完成：

function LoanForm() {
  const { watch, setValue } = useForm()

  const [loanAmount, interestRate, term] = watch([
    'loanAmount',
    'interestRate',
    'term',
  ])

  useEffect(() => {
    if (loanAmount && interestRate && term) {
      const monthlyRate = interestRate / 100 / 12
      const months = term * 12
      const payment =
        (loanAmount * monthlyRate * Math.pow(1 + monthlyRate, months)) /
        (Math.pow(1 + monthlyRate, months) - 1)
      setValue('monthlyPayment', payment.toFixed(2))
    }
  }, [loanAmount, interestRate, term, setValue])

  return (
    <form>
      {/* ... */}
      <input type="number" {...register('monthlyPayment')} />
      {/* ... */}
    </form>
  )
}

登录后复制

完全可定制的用户体验

FormML 采用了强大的模型视图分离架构，可以将表单逻辑与 UI 呈现彻底解耦。领域专家使用 FormML DSL 在 .fml 文件中定义表单的结构、类型和行为（“模型”）。

这种分离使开发人员能够完全专注于打造精美的自定义 UI 体验（“视图”），并具有与其他表单库相同的灵活性，而无需担心底层业务逻辑。

function LoanForm() {
  const { watch, setValue } = useForm()

  const [loanAmount, interestRate, term] = watch([
    'loanAmount',
    'interestRate',
    'term',
  ])

  useEffect(() => {
    if (loanAmount && interestRate && term) {
      const monthlyRate = interestRate / 100 / 12
      const months = term * 12
      const payment =
        (loanAmount * monthlyRate * Math.pow(1 + monthlyRate, months)) /
        (Math.pow(1 + monthlyRate, months) - 1)
      setValue('monthlyPayment', payment.toFixed(2))
    }
  }, [loanAmount, interestRate, term, setValue])

  return (
    <form>
      {/* ... */}
      <input type="number" {...register('monthlyPayment')} />
      {/* ... */}
    </form>
  )
}

登录后复制