Alpaca表单技术求助：为只读字段配置锁定/解锁单选按钮

Absolutely feasible! I’ve tackled similar requirements with Alpaca before, and here’s a practical, step-by-step approach to implement the lock/unlock toggle for your pre-populated read-only fields:

1. Prepare Pre-Populated Data & Base Form Schema #

First, define your pre-filled data and core form schema as usual. Let’s use a sample user profile form for demonstration:

// Pre-populated JSON data
const formData = {
  firstName: "John",
  lastName: "Doe",
  email: "john.doe@example.com",
  phone: "+1-555-123-4567"
};

// Base form schema
const formSchema = {
  type: "object",
  properties: {
    firstName: { type: "string", title: "First Name" },
    lastName: { type: "string", title: "Last Name" },
    email: { type: "string", title: "Email", format: "email" },
    phone: { type: "string", title: "Phone Number" }
  }
};

2. Add Toggle Radio Buttons in Form Options #

In Alpaca’s options configuration, you can inject custom UI elements (the lock/unlock radios) alongside each field. We’ll use the fields property to extend each field’s layout:

const formOptions = {
  fields: {
    firstName: {
      readOnly: true, // Initial read-only state
      postRender: function(field) {
        // Create toggle radio group
        const toggleContainer = document.createElement("div");
        toggleContainer.innerHTML = `
          <div style="margin-top: 8px;">
            <label>
              <input type="radio" name="firstName-toggle" value="locked" checked>
              Locked (Read-only)
            </label>
            <label style="margin-left: 16px;">
              <input type="radio" name="firstName-toggle" value="unlocked">
              Unlocked (Editable)
            </label>
          </div>
        `;
        // Append toggle to field container
        field.getEl().appendChild(toggleContainer);
        
        // Bind toggle event
        toggleContainer.querySelectorAll("input").forEach(radio => {
          radio.addEventListener("change", function() {
            field.setReadOnly(this.value === "locked");
          });
        });
      }
    },
    // Repeat the same pattern for lastName, email, phone...
    lastName: {
      readOnly: true,
      postRender: function(field) {
        // Same toggle logic as firstName, adjust name attribute to "lastName-toggle"
        const toggleContainer = document.createElement("div");
        toggleContainer.innerHTML = `
          <div style="margin-top: 8px;">
            <label>
              <input type="radio" name="lastName-toggle" value="locked" checked>
              Locked (Read-only)
            </label>
            <label style="margin-left: 16px;">
              <input type="radio" name="lastName-toggle" value="unlocked">
              Unlocked (Editable)
            </label>
          </div>
        `;
        field.getEl().appendChild(toggleContainer);
        
        toggleContainer.querySelectorAll("input").forEach(radio => {
          radio.addEventListener("change", function() {
            field.setReadOnly(this.value === "locked");
          });
        });
      }
    }
    // ... add email and phone fields similarly
  }
};

3. Initialize the Form #

Finally, render the form with your schema, data, and options:

Alpaca.form("#form-container", {
  schema: formSchema,
  data: formData,
  options: formOptions
});

Key Notes #

• Reusability: To avoid repeating code for every field, you can create a reusable function to generate the toggle UI and bind events. For example:

  function addLockToggle(field, fieldName) {
    const toggleContainer = document.createElement("div");
    toggleContainer.innerHTML = `
      <div style="margin-top: 8px;">
        <label>
          <input type="radio" name="${fieldName}-toggle" value="locked" ${field.isReadOnly() ? "checked" : ""}>
          Locked (Read-only)
        </label>
        <label style="margin-left: 16px;">
          <input type="radio" name="${fieldName}-toggle" value="unlocked" ${!field.isReadOnly() ? "checked" : ""}>
          Unlocked (Editable)
        </label>
      </div>
    `;
    field.getEl().appendChild(toggleContainer);
    
    toggleContainer.querySelectorAll("input").forEach(radio => {
      radio.addEventListener("change", function() {
        field.setReadOnly(this.value === "locked");
      });
    });
  }
  

  Then call addLockToggle(field, "firstName") inside each field’s postRender callback.

• State Sync: The field.isReadOnly() check ensures the radio buttons reflect the initial readOnly state correctly, even if some fields start unlocked.

This approach leverages Alpaca’s postRender hook and core API methods (setReadOnly(), isReadOnly()) to seamlessly tie the toggle controls to your field states. It works perfectly with pre-populated JSON data since we’re modifying the field’s runtime state without altering the underlying data itself.

内容的提问来源于stack exchange，提问作者bcauchard