如何为Form.io Builder添加不可删除的默认邮箱字段

API 探路者

2026-8-19

解决方案

要给Form.io Builder添加默认且不可删除的邮箱字段，核心是利用Form.io内置的protected: true属性标记字段，该属性会让Builder禁止删除对应字段。具体实现步骤如下：

1. 定义默认邮箱字段配置

先创建邮箱字段的Schema配置，关键是设置protected: true：

const defaultEmailField = {
  type: 'email',
  label: '邮箱',
  key: 'email',
  placeholder: '请输入您的邮箱',
  required: true,
  protected: true, // 核心配置：禁止删除该字段
  persistent: true
};

2. 修改初始化代码，整合默认字段

在初始化Builder时，将默认邮箱字段合并到初始Schema中，同时做去重处理避免重复添加：

window.onload = function() {
  Formio.icons = 'fontawesome';
  
  // 处理初始Schema，添加默认邮箱字段
  let initialSchema = schema ? JSON.parse(schema) : {};
  // 确保components数组存在
  if (!initialSchema.components) {
    initialSchema.components = [];
  }
  // 检查是否已存在同key的邮箱字段，避免重复添加
  const hasEmailField = initialSchema.components.some(comp => comp.key === 'email');
  if (!hasEmailField) {
    initialSchema.components.unshift(defaultEmailField); // 将邮箱字段放在组件列表最顶部
  }

  Formio.builder(document.getElementById('builder'), initialSchema).then(function(builder) {
    changeJson(builder.schema);
    builder.on('change', function() {
      changeJson(builder.schema);
    });
    builder.on('submit', function() {
      return false;
    });
  });
};