Extending functionality

If the options for formset.init() don’t give you enough flexibility, you can override the internal Form and Formset classes.

Accessing the classes

If you’re using it as a script, you can access the classes on formset:

const Form = formset.Form;
const Formset = formset.Formset;

If you’re using it as a module, you can import them directly:

import { init, Form, Formset } from "./formset.module.js";

Create a subclass

You can then subclass the classes to customise functionality.

For example, lets subclass the Formset to pop up an alert when the user tries to add a form when they’ve already reached the maximum number of forms:

class AlertFormset extends Formset {
  addForm() {
    if (this.atMax) {
      alert("You are at the maximum number of forms");
      return;
    }
    super();
  }
}

Lets also subclass the Form to alert when the user tries to delete a form when they’re already at the minimum number of forms:

class AlertForm extends Form {
  getDeleteEl() {
    let checkbox = super();
    checkbox.addEventListener('click', (e) => {
      if (this.isDeleted && this.atMin) {
        alert("You are at the minimum number of forms");
        e.preventDefault();
        e.stopPropagation();
      }
    }, true);
    return checkbox;
  }
}

Using your subclass

You can pass your subclasses into formset.init() using the options:

formset.init({
  formsetClass: AlertFormset,
  formClass: AlertForm,
});

Alternatively, if you’re doing something clever you can create the Formset class directly - but note there will be no default options unless you specify them:

import { defaultOptions } from "formset";
const bookFormset = new AlertFormset(
  document.getElementById('book-formset'),
  {...defaultOptions, formClass: AlertForm},
);