Skip to main content

Form class

📖 Description​

The Form class defines a form for the Tripetto builder. It is derived from the Components.Card class. You can use any of the following form controls (or make your own control with the Control or DataControl abstract classes):

🆕 constructor​

Creates a new Form instance.

Signature​
constructor(properties: IFormProperties): Form
Parameters​
NameTypeOptionalDescription
propertiesIFormPropertiesNoSpecifies the form properties.
Return value​

Returns a reference to the new Form instance.

📌 Statics​

🏷ī¸ style​

Contains the global default style for the form.

Type​

IFormStyle

🗃ī¸ Fields​

🏷ī¸ count​

Retrieves the number of controls in the form.

Type​

number

🏷ī¸ feature​

Sets or retrieves a reference to the feature.

Type​

Feature | undefined

🏷ī¸ hasFocus​

Retrieves if the form has focus.

Type​

boolean

🏷ī¸ isActivated​

Retrieves if the form is activated.

Type​

boolean

🏷ī¸ isAwaiting​

Retrieves if the form validation is awaiting.

Type​

boolean

🏷ī¸ isDisabled​

Sets or retrieves if the form is disabled.

Type​

boolean

🏷ī¸ isFailed​

Retrieves if the form validation has failed.

Type​

boolean

🏷ī¸ isInvalid​

Retrieves if the form validation is invalid.

Type​

boolean

🏷ī¸ isObservable​

Retrieves if the form is observable.

Type​

boolean

🏷ī¸ isPassed​

Retrieves if the form validation has passed.

Type​

boolean

🏷ī¸ isVisible​

Sets or retrieves if the form is visible.

Type​

boolean

🏷ī¸ title​

Sets or retrieves the title of the form.

Type​

string

🏷ī¸ validation​

Retrieves the validation state of the form.

Type​

"unknown" | "fail" | "invalid" | "pass" | "await"

â–ļī¸ Methods​

🔧 control​

Retrieves the control at the specified index.

Signature​
control(index: number): Control | undefined
Parameters​
NameTypeOptionalDescription
indexnumberNoSpecifies the control index where the first control in the form has index 0.
Return value​

Returns the Control instance or undefined if the control is not found.

🔧 controlWithReference​

Retrieves the control with the specified reference.

tip

The reference of a control is set using the reference method of a control derived from the Control base class.

Signature​
controlWithReference(reference: string): Control | undefined
Parameters​
NameTypeOptionalDescription
referencestringNoSpecifies the control reference.
Return value​

Returns the Control instance or undefined if the control is not found.

🔧 deactivate​

Deactivates the form.

Signature​
deactivate(): this
Return value​

Returns a reference to the Form instance to allow chaining.

🔧 each​

Iterates through all controls in a form.

Signature​
each(fn: (control: Control) => void): void
Parameters​
NameTypeOptionalDescription
fn(control: Control) => voidNoContains the function which is invoked for each control.

🔧 focus​

Sets focus to the first or last control in the form.

Signature​
focus(to?: "first" | "last"): boolean
Parameters​
NameTypeOptionalDescription
to"first" | "last"YesSpecifies if the focus is set to the first or last control (default is first).
Return value​

Returns true if a control captured focus.

🔧 focusTo​

Sets the focus to the previous or next control.

Signature​
focusTo(to: "previous" | "next"): boolean
Parameters​
NameTypeOptionalDescription
to"previous" | "next"NoSpecifies if the focus is set to the previous or next control.
Return value​

Returns true if the focus is shifted.

🔧 hide​

Hides the form.

Signature​
hide(): this
Return value​

Returns a reference to the Form instance to allow chaining.

🔧 scrollIntoView​

Scrolls the form into view.

Signature​
scrollIntoView(): this
Return value​

Returns a reference to the Form instance to allow chaining.

🔧 show​

Shows the form.

Signature​
show(): this
Return value​

Returns a reference to the Form instance to allow chaining.

🔧 validate​

Validates the form.

info

Form validation is performed automatically. You only need to call this method to force a validation cycle.

Signature​
validate(): this
Return value​

Returns a reference to the Form instance to allow chaining.

🔧 visible​

Shows or hides the form.

Signature​
visible(visible: boolean, scrollIntoView?: boolean): this
Parameters​
NameTypeOptionalDescription
visiblebooleanNoSpecifies if the form is visible.
scrollIntoViewbooleanYesSpecifies if the form should scroll into view.
Return value​

Returns a reference to the Form instance to allow chaining.

⛓ī¸ Interfaces​

🔗 IFormProperties​

Describes the interface for declaring the form properties.

Type declaration​
interface IFormProperties {
  controls: (Control | Group)[];
  title?: string;Optional
  markdown?: boolean | IMarkdownOptions;Optional
  disabled?: boolean;Optional
  mode?: "normal" | "compact" | "both";Optional
}
🖱ī¸ Hover with the mouse over a property name for a tooltip with the description of that property. Click it for more information.

🏷ī¸ controls​

Specifies the controls for the form.

Type​

(Control | Group)[]

🏷ī¸ disabled​

Specifies if the form is disabled.

Type​

boolean

🏷ī¸ markdown​

Specifies if markdown is supported in the form title.

Type​

boolean | IMarkdownOptions

🏷ī¸ mode​

Specifies the supported modes for the form (default is both).

Type​

"normal" | "compact" | "both"

🏷ī¸ title​

Specifies the form title.

Type​

string

🔗 IFormStyle​

Describes the interface for the form styles.

Type declaration​
interface IFormStyle {
  /* Form appearance. */
  appearance?: IStyles;

  /* Form title. */
  title?: IStyles;

  /* Form disabled. */
  disabled?: IStyles;

  /* Form locked. */
  locked?: IStyles;

  /* Form required. */
  required?: IStyles;

  /* Form focus. */
  focus?: IStyles;

  /* Form validation passed. */
  passed?: IStyles;

  /* Form validation failed. */
  failed?: IStyles;

  /* Form validation awaiting. */
  awaiting?: IStyles;

  /* Form normal mode. */
  normal?: IStyles;

  /* Form Compact mode. */
  compact?: IStyles;

  /* Contains the number of indent pixels per level. */
  indentation?: number;

  /* Fused form. */
  fused?: {
    /* Fused form appearance. */
    appearance?: IStyles;

    /* Fused form title. */
    title?: IStyles;
  };

  /* Control styles. */
  controls?: {
    [control: string]: IControlStyle;
  };
}