Form Data Binding

Two-way data binding with forms, real-time validation, and FormData collection for easy submission.

Live Demo

Fill out the form below and watch the live preview update in real-time!

Live Preview (Real-time binding)

Name: {{name}}
Email: {{email}}
About: {{about}}
Profession: {{role}}
Likes Programming: {{programming}}
Gender: {{gender}}

HTML Template

<x-form-component>
  <form>
    <!-- Text Input -->
    <input type="text" name="firstname" value="{{name}}" />

    <!-- Email Input -->
    <input type="email" name="email" value="{{email}}" />

    <!-- Textarea -->
    <textarea name="about">{{about}}</textarea>

    <!-- Select Dropdown -->
    <select name="profession" x-selected="role">
      <option value="Developer">Developer</option>
      <option value="Designer">Designer</option>
    </select>

    <!-- Checkbox -->
    <input type="checkbox" name="programming"
           value="1" x-checked="programming" />

    <!-- Radio Buttons -->
    <input type="radio" name="gender"
           value="Male" x-checked="gender" />
    <input type="radio" name="gender"
           value="Female" x-checked="gender" />

    <button type="button" x-click="print">
      Show FormData
    </button>
  </form>
</x-form-component>

JavaScript Component

function FormComponent(self) {
  // Initialize form data
  self.name = "";
  self.email = "";
  self.about = "";
  self.role = "";
  self.gender = null;
  self.programming = false;

  // Print FormData
  self.print = () => {
    const formResult = self.find('#form-result');
    formResult.setHtml('<strong>FormData Contents:</strong><br>');

    const formData = self.find('form').formData();
    for (let [key, value] of formData) {
      formResult.appendHtml(`<div>${key}: ${value}</div>`);
    }
  }

  // Reset form
  self.reset = () => {
    self.name = "";
    self.email = "";
    self.about = "";
    self.role = "";
    self.gender = null;
    self.programming = false;
    self.find('#form-result').setHtml('');
  }
}

$(FormComponent);

Key Concepts