formModal() function

Innehåll

Syntax
Usage
Relaterat

Open a form inside a FFormModal modal and return the form data.

This is for Vue Options API. Use useModal() with Composition API.

Syntax

function formModal(callingInstance, options);

Parameters

callingInstance

Current component attempting to open confirmation modal. Typically this.

options Optional

Modal options.

size Optional

Optional modal size.

Must be one of:

"large"
`"fullscreen"

props Optional

Optional props to pass to modal.

Return value

A Promise resolving to the form data bound to the value prop.

Usage

Provided the component MyFormModalComponent has a data field of type MyFormInterface corresponding to the returned value on submit. On cancel/close a promise is rejected.

/* Typescript interface definition of MyFormInterface: */
interface MyFormInterface {
    field1: string;
    field2: string;
}

let result: MyFormInterface;
try {
    result = await formModal<MyFormInterface>(
        this,
        MyFormModalComponent,
    );
} catch {
    /* handle cancel/close case */
    return;
}

/* handle submit case */
console.log("Modal closed with result", result);
// Modal closed with result `data`

The example below is for sending size, and custom Vue props to the component MyFormModalComponent.

let result: MyFormInterface;
try {
    result = await formModal<MyFormInterface>(
        this,
        MyFormModalComponent,
        {
            size: "large",
            props: {
                myCustomProp: "myCustomProp",
            },
        },
    );
} catch {
    /* handle cancel/close case */
    return;
}

/* handle submit case */
console.log("Modal closed with result", result);
// Modal closed with result `data`

Relaterat