Form.withSections

API / Form<TValidationError> / withSections method

Adds the provided sections to the form, returns an observable collection containing them.

Any changes made to the returned collection is reflected in the form as well, added sections are added, removed sections are removed, sorting or moving sections around are moved in the form as well.

protected withSections(
  ...sections: readonly Form<TValidationError>[]
): FormCollection<Form<TValidationError>, TValidationError>

Source reference: src/forms/Form.ts:759.

Parameters

• sections (rest): readonly Form<TValidationError>[]
  The sections to add to the form.

Returns: FormCollection<Form<TValidationError>, TValidationError>

Returns a collection containing the provided sections. The form reacts to changes made in the returned collection always keeping in sync.

Guidance: Splitting a Form into Sections

In some cases the form that is being edited is rather large and having all fields put together would make the code hard to follow. It is natural to want to group fields together in such cases as it provides a way to clearly group related fields together and even reuse parts of a form.

Adding sections to a form is done similar to how fields are done, any form section is itself a form.

class MyForm extends Form {
  public constructor() {
    super();

    this.withSections(
      this.first = new MyFirstSection(),
      this.second = new MySecondSection()
    );
  }

  public readonly first: MyFirstSection;

  public readonly second: MySecondSection;
}

class MyFirstSection extends Form {
  // ...
}

class MySecondSection extends Form {
  // ...
}

This will propagate any changes from the individual sections to the form itself making it easy to check the validity of the entire form.

See also

• Form.withFields
• Form.withSectionsCollection