Wagtail client-side components
    Preparing search index...

    Class FormsetController

    Adds the ability for a dynamic, expanding, formset leveraging the Django formset system of inputs and management fields.

    <form data-controller="w-formset">
      <input type="hidden" name="form-TOTAL_FORMS" value="2" data-w-formset-target="totalFormsInput">
      <input type="hidden" name="form-MIN_NUM_FORMS" value="0" data-w-formset-target="minFormsInput">
      <input type="hidden" name="form-MAX_NUM_FORMS" value="50" data-w-formset-target="maxFormsInput">
      <input type="hidden" name="form-INITIAL_FORMS" value="2">
      <ul data-w-formset-target="forms">
        <li data-w-formset-target="child">
          <input type="text" name="form-0-name">
          <input type="hidden" name="form-0-DELETE" data-w-formset-target="deleteInput">
          <button type="button" data-action="w-formset#delete">Delete</button>
        </li>
        <li data-w-formset-target="child">
          <input type="text" name="form-1-name">
          <input type="hidden" name="form-1-DELETE" data-w-formset-target="deleteInput">
          <button type="button" data-action="w-formset#delete">Delete</button>
        </li>
      </ul>
      <button type="button" data-action="w-formset#add">Add</button>
      <template data-w-formset-target="template">
        <li data-w-formset-target="child">
          <input type="text" name="form-__prefix__-name">
          <input type="hidden" name="form-__prefix__-DELETE" data-w-formset-target="deleteInput">
          <button type="button" data-action="w-formset#delete">Delete</button>
        </li>
      </template>
    </form>

    Hierarchy

    Index

    Constructors

    constructor

    Properties

    childTargets context deletedClasses deletedTargets deleteInputTargets elementPrefixRegex formsTarget maxFormsInputTarget maxValue minFormsInputTarget minValue templateTarget totalFormsInputTarget totalValue blessings classes outlets targets values

    Accessors

    application classes data element identifier newChild outlets scope targets shouldLoad

    Methods

    add childTargetConnected childTargetDisconnected connect delete disconnect dispatch initialize totalValueChanged afterLoad

    Constructors

    • Parameters

      • context: Context

      Returns FormsetController

    Properties

    childTargets: HTMLElement[]

    Active child form elements.

    context: Context
    deletedClasses: string[]

    Classes to append when transitioning from an active child to a deleted form.

    deletedTargets: HTMLElement[]

    Tracking of deleted child form elements.

    deleteInputTargets: HTMLInputElement[]

    Hidden input to track whether a specific form has been removed.

    elementPrefixRegex: RegExp = ...
    formsTarget: HTMLElement

    Target element to append new child forms to.

    maxFormsInputTarget: HTMLInputElement

    Hidden input to read for the value for max forms.

    maxValue: number

    Set to the value to the management field MAX_NUM_FORMS.

    minFormsInputTarget: HTMLInputElement

    Hidden input to read for the value for min forms.

    minValue: number

    Set to the value to the management field MIN_NUM_FORMS.

    templateTarget: HTMLTemplateElement

    Target element that has the template content to clone for new forms. __prefix__ will be replaced with the next formIndex value upon creation.

    totalFormsInputTarget: HTMLInputElement

    Hidden input to track the total forms (including deleted) for POST request and initial reading.

    totalValue: number

    Value tracking for the total amount of forms either active or deleted.

    blessings: (<T>(constructor: Constructor<T>) => any)[]
    classes: string[] = ...
    outlets: string[]
    targets: string[] = ...
    values: {
        max: { default: number; Number: NumberConstructor };
        min: { default: number; Number: NumberConstructor };
        total: { default: number; Number: NumberConstructor };
    } = ...

    Accessors

    • get application(): Application

      Returns Application

    • get classes(): ClassMap

      Returns ClassMap

    • get data(): DataMap

      Returns DataMap

    • get element(): ElementType

      Returns ElementType

    • get identifier(): string

      Returns string

    • get outlets(): OutletSet

      Returns OutletSet

    • get scope(): Scope

      Returns Scope

    • get targets(): TargetSet

      Returns TargetSet

    • get shouldLoad(): boolean

      Returns boolean

    Methods

    • Find the event's target's closest child target and remove it by removing the 'child' target and adding a 'child-removed' target.

      Parameters

      Returns void

    • Returns void

    • Parameters

      • eventName: string
      • Optional__namedParameters: Partial<
            {
                bubbles: boolean;
                cancelable: boolean;
                detail: Object;
                prefix: string;
                target: Element
                | Window
                | Document;
            },
        >

      Returns CustomEvent<Object>

    • When the totalValue changes, update the management fields and dispatch a change event for the TOTAL_FORMS input.

      Parameters

      • currentValue: number
      • previousValue: undefined | number

      Returns void

    • Parameters

      • _identifier: string
      • _application: Application

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods