xmlui 0.10.26 → 0.11.2

package/dist/scripts/src/components/Form/Form.spec.js

@@ -97,6 +97,334 @@ fixtures_1.test.describe("Basic Functionality", () => {
         yield (0, fixtures_1.expect)(buttons.last()).toHaveText("Cancel");
     }));
     // =============================================================================
+    // HIDE BUTTON ROW TESTS
+    // =============================================================================
+    fixtures_1.test.describe("hideButtonRow property", () => {
+        (0, fixtures_1.test)("hides button row when set to true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Form hideButtonRow="true"/>`);
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).not.toBeVisible();
+        }));
+        (0, fixtures_1.test)("shows button row when set to false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Form hideButtonRow="false"/>`);
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
+        }));
+        (0, fixtures_1.test)("shows button row by default when property not set", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Form/>`);
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
+        }));
+        (0, fixtures_1.test)("hides custom button row template when set to true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Form hideButtonRow="true">
+          <property name="buttonRowTemplate">
+            <Button label="Custom Save" type="submit" testId="customSave" />
+            <Button label="Custom Cancel" type="button" testId="customCancel" />
+          </property>
+        </Form>
+      `);
+            yield (0, fixtures_1.expect)(page.getByTestId("customSave")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByTestId("customCancel")).not.toBeVisible();
+        }));
+        (0, fixtures_1.test)("overrides hideButtonRowUntilDirty when both are set", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
+            yield initTestBed(`
+        <Form hideButtonRow="true" hideButtonRowUntilDirty="true">
+          <FormItem label="Name" bindTo="name" testId="nameField" />
+        </Form>
+      `);
+            // Button row should be hidden even before making changes
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).not.toBeVisible();
+            // Make the form dirty
+            const driver = yield createFormItemDriver("nameField");
+            const input = yield createTextBoxDriver(driver.input);
+            yield input.field.fill("John");
+            // Button row should still be hidden even after making changes
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).not.toBeVisible();
+        }));
+        (0, fixtures_1.test)("handles null value gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Form hideButtonRow="{null}"/>`);
+            // Should show button row (default behavior)
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
+        }));
+        (0, fixtures_1.test)("handles undefined value gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Form hideButtonRow="{undefined}"/>`);
+            // Should show button row (default behavior)
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
+        }));
+        (0, fixtures_1.test)("handles string 'true' value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Form hideButtonRow="true"/>`);
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).not.toBeVisible();
+        }));
+        (0, fixtures_1.test)("handles string 'false' value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Form hideButtonRow="false"/>`);
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
+        }));
+        (0, fixtures_1.test)("form submission still works with hidden button row via external submit", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Fragment>
+          <Form id="testForm" hideButtonRow="true" onSubmit="arg => testState = arg">
+            <FormItem label="Name" bindTo="name" testId="nameField" />
+            <Button type="submit" label="External Submit" testId="externalSubmit" />
+          </Form>
+        </Fragment>
+      `);
+            const driver = yield createFormItemDriver("nameField");
+            const input = yield createTextBoxDriver(driver.input);
+            yield input.field.fill("John Doe");
+            yield page.getByTestId("externalSubmit").click();
+            const submittedData = yield testStateDriver.testState();
+            (0, fixtures_1.expect)(submittedData).toEqual({ name: "John Doe" });
+        }));
+    });
+    // =============================================================================
+    // HIDE BUTTON ROW UNTIL DIRTY TESTS
+    // =============================================================================
+    fixtures_1.test.describe("hideButtonRowUntilDirty property", () => {
+        (0, fixtures_1.test)("hides button row initially when form is not dirty", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Form hideButtonRowUntilDirty="true">
+          <FormItem label="Name" bindTo="name" testId="nameField" />
+        </Form>
+      `);
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).not.toBeVisible();
+        }));
+        (0, fixtures_1.test)("shows button row when form becomes dirty", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
+            yield initTestBed(`
+        <Form hideButtonRowUntilDirty="true">
+          <FormItem label="Name" bindTo="name" testId="nameField" />
+        </Form>
+      `);
+            // Initially hidden
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).not.toBeVisible();
+            // Make form dirty
+            const driver = yield createFormItemDriver("nameField");
+            const input = yield createTextBoxDriver(driver.input);
+            yield input.field.fill("John");
+            // Now visible
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
+        }));
+        (0, fixtures_1.test)("keeps button row visible after form becomes dirty", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
+            yield initTestBed(`
+        <Form hideButtonRowUntilDirty="true">
+          <FormItem label="Name" bindTo="name" testId="nameField" />
+        </Form>
+      `);
+            const driver = yield createFormItemDriver("nameField");
+            const input = yield createTextBoxDriver(driver.input);
+            // Make form dirty
+            yield input.field.fill("John");
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
+            // Clear the input (form is still dirty)
+            yield input.field.clear();
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
+        }));
+        (0, fixtures_1.test)("shows button row by default when property set to false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+            yield initTestBed(`
+        <Form hideButtonRowUntilDirty="false">
+          <FormItem label="Name" bindTo="name" testId="nameField" />
+        </Form>
+      `);
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
+        }));
+        (0, fixtures_1.test)("shows button row by default when property not set", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Form>
+          <FormItem label="Name" bindTo="name" testId="nameField" />
+        </Form>
+      `);
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
+        }));
+        (0, fixtures_1.test)("works with multiple form items", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
+            yield initTestBed(`
+        <Form hideButtonRowUntilDirty="true">
+          <FormItem label="Name" bindTo="name" testId="nameField" />
+          <FormItem label="Email" bindTo="email" testId="emailField" />
+        </Form>
+      `);
+            // Initially hidden
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).not.toBeVisible();
+            // Modify second field
+            const emailDriver = yield createFormItemDriver("emailField");
+            const emailInput = yield createTextBoxDriver(emailDriver.input);
+            yield emailInput.field.fill("test@example.com");
+            // Now visible
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
+        }));
+        (0, fixtures_1.test)("hides custom button row template until dirty", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
+            yield initTestBed(`
+        <Form hideButtonRowUntilDirty="true">
+          <FormItem label="Name" bindTo="name" testId="nameField" />
+          <property name="buttonRowTemplate">
+            <Button label="Custom Save" type="submit" testId="customSave" />
+          </property>
+        </Form>
+      `);
+            // Initially hidden
+            yield (0, fixtures_1.expect)(page.getByTestId("customSave")).not.toBeVisible();
+            // Make form dirty
+            const driver = yield createFormItemDriver("nameField");
+            const input = yield createTextBoxDriver(driver.input);
+            yield input.field.fill("John");
+            // Now visible
+            yield (0, fixtures_1.expect)(page.getByTestId("customSave")).toBeVisible();
+        }));
+        (0, fixtures_1.test)("handles null value gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Form hideButtonRowUntilDirty="{null}">
+          <FormItem label="Name" bindTo="name" testId="nameField" />
+        </Form>
+      `);
+            // Should show button row (default behavior)
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
+        }));
+        (0, fixtures_1.test)("handles undefined value gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Form hideButtonRowUntilDirty="{undefined}">
+          <FormItem label="Name" bindTo="name" testId="nameField" />
+        </Form>
+      `);
+            // Should show button row (default behavior)
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
+        }));
+        (0, fixtures_1.test)("works with form initialized with data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
+            yield initTestBed(`
+        <Form hideButtonRowUntilDirty="true" data="{{ name: 'Initial' }}">
+          <FormItem label="Name" bindTo="name" testId="nameField" />
+        </Form>
+      `);
+            // Initially hidden (form has data but is not dirty)
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).not.toBeVisible();
+            // Make form dirty
+            const driver = yield createFormItemDriver("nameField");
+            const input = yield createTextBoxDriver(driver.input);
+            yield input.field.fill("Modified");
+            // Now visible
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
+        }));
+        (0, fixtures_1.test)("button row appears when checkbox is checked", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Form hideButtonRowUntilDirty="true">
+          <FormItem label="Accept Terms" bindTo="terms" type="checkbox" />
+        </Form>
+      `);
+            // Initially hidden
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).not.toBeVisible();
+            // Check the checkbox
+            const checkbox = page.getByRole("checkbox");
+            yield checkbox.check();
+            // Now visible
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
+        }));
+        (0, fixtures_1.test)("button row appears when slider value changes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Form hideButtonRowUntilDirty="true">
+          <FormItem label="Volume" bindTo="volume" type="slider" testId="volumeField" />
+        </Form>
+      `);
+            // Initially hidden
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).not.toBeVisible();
+            // Move the slider using keyboard
+            const slider = page.getByRole("slider");
+            yield slider.press("ArrowRight");
+            // Now visible
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
+        }));
+    });
+    // =============================================================================
+    // ENABLE SUBMIT PROPERTY TESTS
+    // =============================================================================
+    fixtures_1.test.describe("enableSubmit property", () => {
+        (0, fixtures_1.test)("disables submit button when set to false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Form enableSubmit="false"/>`);
+            const saveButton = page.getByRole("button", { name: "Save" });
+            yield (0, fixtures_1.expect)(saveButton).toBeVisible();
+            yield (0, fixtures_1.expect)(saveButton).toBeDisabled();
+        }));
+        (0, fixtures_1.test)("enables submit button when set to true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Form enableSubmit="true"/>`);
+            const saveButton = page.getByRole("button", { name: "Save" });
+            yield (0, fixtures_1.expect)(saveButton).toBeVisible();
+            yield (0, fixtures_1.expect)(saveButton).toBeEnabled();
+        }));
+        (0, fixtures_1.test)("submit button is enabled by default when property not set", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+            yield initTestBed(`<Form/>`);
+            const saveButton = page.getByRole("button", { name: "Save" });
+            yield (0, fixtures_1.expect)(saveButton).toBeEnabled();
+        }));
+        (0, fixtures_1.test)("prevents form submission when set to false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Form enableSubmit="false" onSubmit="arg => testState = arg">
+          <FormItem label="Name" bindTo="name" testId="nameField" />
+        </Form>
+      `);
+            const saveButton = page.getByRole("button", { name: "Save" });
+            yield (0, fixtures_1.expect)(saveButton).toBeDisabled();
+            // Verify form does not submit (button is disabled, so click won't work)
+            yield saveButton.click({ force: true }); // Force click on disabled button
+            // testState should remain null since submit was prevented
+            yield fixtures_1.expect.poll(testStateDriver.testState).toBeNull();
+        }));
+        (0, fixtures_1.test)("allows form submission when set to true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Form enableSubmit="true" onSubmit="arg => testState = arg">
+          <FormItem label="Name" bindTo="name" testId="nameField" />
+        </Form>
+      `);
+            const driver = yield createFormItemDriver("nameField");
+            const input = yield createTextBoxDriver(driver.input);
+            yield input.field.fill("John Doe");
+            const saveButton = page.getByRole("button", { name: "Save" });
+            yield (0, fixtures_1.expect)(saveButton).toBeEnabled();
+            yield saveButton.click();
+            const submittedData = yield testStateDriver.testState();
+            (0, fixtures_1.expect)(submittedData).toEqual({ name: "John Doe" });
+        }));
+        (0, fixtures_1.test)("handles null value gracefully (defaults to enabled)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Form enableSubmit="{null}"/>`);
+            const saveButton = page.getByRole("button", { name: "Save" });
+            yield (0, fixtures_1.expect)(saveButton).toBeEnabled();
+        }));
+        (0, fixtures_1.test)("handles string 'true' value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Form enableSubmit="true"/>`);
+            const saveButton = page.getByRole("button", { name: "Save" });
+            yield (0, fixtures_1.expect)(saveButton).toBeEnabled();
+        }));
+        (0, fixtures_1.test)("handles string 'false' value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Form enableSubmit="false"/>`);
+            const saveButton = page.getByRole("button", { name: "Save" });
+            yield (0, fixtures_1.expect)(saveButton).toBeDisabled();
+        }));
+        (0, fixtures_1.test)("does not affect cancel button", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Form enableSubmit="false"/>`);
+            const cancelButton = page.getByRole("button", { name: "Cancel" });
+            yield (0, fixtures_1.expect)(cancelButton).toBeEnabled();
+        }));
+        (0, fixtures_1.test)("works with custom submit button label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Form enableSubmit="false" saveLabel="Submit Now"/>`);
+            const submitButton = page.getByRole("button", { name: "Submit Now" });
+            yield (0, fixtures_1.expect)(submitButton).toBeDisabled();
+        }));
+        (0, fixtures_1.test)("works together with form disabled state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Form enabled="false" enableSubmit="true"/>`);
+            const saveButton = page.getByRole("button", { name: "Save" });
+            // Form disabled takes precedence
+            yield (0, fixtures_1.expect)(saveButton).toBeDisabled();
+        }));
+    });
+    // =============================================================================
     // DATA PROPERTY TESTS
     // =============================================================================
     fixtures_1.test.describe("data property", () => {
@@ -366,6 +694,122 @@ fixtures_1.test.describe("Basic Functionality", () => {
             yield page.getByRole("button", { name: "Reset" }).click();
             yield (0, fixtures_1.expect)(nameInput.field).toHaveValue("Initial");
         }));
+        (0, fixtures_1.test)("validate method returns validation results without submitting", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Form id="testForm">
+          <FormItem label="Name" bindTo="name" required="true" testId="nameField" />
+          <FormItem label="Email" bindTo="email" testId="emailField" />
+          <Button onClick="testState = testForm.validate()" label="Validate" testId="validateBtn" />
+        </Form>
+      `);
+            // Click validate button without filling required field
+            yield page.getByTestId("validateBtn").click();
+            // Wait for validation to complete
+            yield page.waitForTimeout(100);
+            const result = yield testStateDriver.testState();
+            (0, fixtures_1.expect)(result).toBeTruthy();
+            (0, fixtures_1.expect)(result.isValid).toBe(false);
+            (0, fixtures_1.expect)(result.errors).toBeDefined();
+            (0, fixtures_1.expect)(result.errors.length).toBeGreaterThan(0);
+        }));
+        (0, fixtures_1.test)("validate method returns isValid true when all validations pass", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Form id="testForm">
+          <FormItem label="Name" bindTo="name" required="true" testId="nameField" />
+          <Button onClick="testState = testForm.validate()" label="Validate" testId="validateBtn" />
+        </Form>
+      `);
+            // Fill the required field
+            const nameDriver = yield createFormItemDriver("nameField");
+            const nameInput = yield createTextBoxDriver(nameDriver.input);
+            yield nameInput.field.fill("John Doe");
+            // Click validate button
+            yield page.getByTestId("validateBtn").click();
+            // Wait for validation to complete
+            yield page.waitForTimeout(100);
+            const result = yield testStateDriver.testState();
+            (0, fixtures_1.expect)(result).toBeTruthy();
+            (0, fixtures_1.expect)(result.isValid).toBe(true);
+            (0, fixtures_1.expect)(result.errors.length).toBe(0);
+        }));
+        (0, fixtures_1.test)("validate method returns cleaned form data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Form id="testForm">
+          <FormItem label="Name" bindTo="name" testId="nameField" />
+          <FormItem label="Age" bindTo="age" type="integer" testId="ageField" />
+          <Button onClick="testState = testForm.validate()" label="Validate" testId="validateBtn" />
+        </Form>
+      `);
+            // Fill form fields
+            const nameDriver = yield createFormItemDriver("nameField");
+            const nameInput = yield createTextBoxDriver(nameDriver.input);
+            yield nameInput.field.fill("John Doe");
+            const ageDriver = yield createFormItemDriver("ageField");
+            const ageInput = yield createTextBoxDriver(ageDriver.input);
+            yield ageInput.field.fill("30");
+            // Click validate button
+            yield page.getByTestId("validateBtn").click();
+            // Wait for validation to complete
+            yield page.waitForTimeout(100);
+            const result = yield testStateDriver.testState();
+            (0, fixtures_1.expect)(result).toBeTruthy();
+            (0, fixtures_1.expect)(result.data).toEqual({ name: "John Doe", age: "30" });
+        }));
+        (0, fixtures_1.test)("validate method displays validation errors on form", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, }) {
+            yield initTestBed(`
+        <Form id="testForm">
+          <FormItem label="Name" bindTo="name" required="true" testId="nameField" />
+          <Button onClick="testForm.validate()" label="Validate" testId="validateBtn" />
+        </Form>
+      `);
+            // Click validate without filling required field
+            yield page.getByTestId("validateBtn").click();
+            // Validation error should be displayed
+            const nameField = page.getByTestId("nameField");
+            yield (0, fixtures_1.expect)(nameField).toContainText("This field is required");
+        }));
+        (0, fixtures_1.test)("validate method does not trigger form submission", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Form id="testForm" onSubmit="testState = 'submitted'">
+          <FormItem label="Name" bindTo="name" testId="nameField" />
+          <Button onClick="testForm.validate()" label="Validate" testId="validateBtn" />
+        </Form>
+      `);
+            // Fill form
+            const nameDriver = yield createFormItemDriver("nameField");
+            const nameInput = yield createTextBoxDriver(nameDriver.input);
+            yield nameInput.field.fill("John");
+            // Click validate button
+            yield page.getByTestId("validateBtn").click();
+            // Wait a bit
+            yield page.waitForTimeout(200);
+            // testState should remain null (not 'submitted')
+            yield fixtures_1.expect.poll(testStateDriver.testState).toBeNull();
+        }));
+        (0, fixtures_1.test)("validate method returns complete validation results object", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Form id="testForm">
+          <FormItem label="Name" bindTo="name" required="true" testId="nameField" />
+          <FormItem label="Email" bindTo="email" testId="emailField" />
+          <Button onClick="testState = testForm.validate()" label="Validate" testId="validateBtn" />
+        </Form>
+      `);
+            // Fill only email (name is required)
+            const emailDriver = yield createFormItemDriver("emailField");
+            const emailInput = yield createTextBoxDriver(emailDriver.input);
+            yield emailInput.field.fill("test@example.com");
+            // Click validate button
+            yield page.getByTestId("validateBtn").click();
+            // Wait for validation to complete
+            yield page.waitForTimeout(100);
+            const result = yield testStateDriver.testState();
+            (0, fixtures_1.expect)(result).toBeTruthy();
+            (0, fixtures_1.expect)(result.isValid).toBeDefined();
+            (0, fixtures_1.expect)(result.data).toBeDefined();
+            (0, fixtures_1.expect)(result.errors).toBeDefined();
+            (0, fixtures_1.expect)(result.warnings).toBeDefined();
+            (0, fixtures_1.expect)(result.validationResults).toBeDefined();
+        }));
     });
     // =============================================================================
     // CONTEXT VARIABLE TESTS

package/dist/scripts/src/components/Form/FormNative.js

@@ -68,14 +68,24 @@ const formReducer = (0, immer_1.default)((state, action) => {
     }
     switch (action.type) {
         case formActions_1.FormActionKind.FIELD_INITIALIZED: {
-            if (!state.interactionFlags[uid].isDirty || action.payload.force) {
+            // Only set the value if initialValue is defined and field is not dirty (or force is true)
+            if (action.payload.value !== undefined && (!state.interactionFlags[uid].isDirty || action.payload.force)) {
                 (0, lodash_es_1.set)(state.subject, uid, action.payload.value);
             }
+            // Track noSubmit flag - if multiple FormItems reference the same bindTo,
+            // and any of them has noSubmit: true, the field should NOT be submitted.
+            if (state.noSubmitFields[uid] === true || action.payload.noSubmit === true) {
+                state.noSubmitFields[uid] = true;
+            }
+            else {
+                state.noSubmitFields[uid] = false;
+            }
             break;
         }
         case formActions_1.FormActionKind.FIELD_REMOVED: {
             delete state.validationResults[uid];
             delete state.interactionFlags[uid];
+            delete state.noSubmitFields[uid];
             break;
         }
         case formActions_1.FormActionKind.FIELD_VALUE_CHANGED: {
@@ -180,6 +190,7 @@ const initialState = {
     validationResults: {},
     generalValidationResults: [],
     interactionFlags: {},
+    noSubmitFields: {},
     submitInProgress: false,
     resetVersion: 0,
 };
@@ -192,18 +203,21 @@ exports.defaultProps = {
     keepModalOpenOnSubmit: false,
     swapCancelAndSave: false,
     hideButtonRowUntilDirty: false,
+    hideButtonRow: false,
+    enableSubmit: true,
 };
 // --- Remove the properties from formState.subject where the property name ends with UNBOUND_FIELD_SUFFIX
-function cleanUpSubject(subject) {
+// --- or where the field has noSubmit set to true
+function cleanUpSubject(subject, noSubmitFields) {
     return Object.entries(subject || {}).reduce((acc, [key, value]) => {
-        if (!key.endsWith(formActions_1.UNBOUND_FIELD_SUFFIX)) {
+        if (!key.endsWith(formActions_1.UNBOUND_FIELD_SUFFIX) && !noSubmitFields[key]) {
             acc[key] = value;
         }
         return acc;
     }, {});
 }
 const Form = (0, react_2.forwardRef)(function (_a, ref) {
-    var { formState, dispatch, initialValue = constants_1.EMPTY_OBJECT, children, style, className, enabled = true, cancelLabel = exports.defaultProps.cancelLabel, saveLabel = exports.defaultProps.saveLabel, saveInProgressLabel = exports.defaultProps.saveInProgressLabel, swapCancelAndSave, onWillSubmit, onSubmit, onCancel, onReset, onSuccess, buttonRow, id, registerComponentApi, itemLabelBreak = exports.defaultProps.itemLabelBreak, itemLabelWidth, itemLabelPosition = exports.defaultProps.itemLabelPosition, keepModalOpenOnSubmit = exports.defaultProps.keepModalOpenOnSubmit, hideButtonRowUntilDirty } = _a, rest = __rest(_a, ["formState", "dispatch", "initialValue", "children", "style", "className", "enabled", "cancelLabel", "saveLabel", "saveInProgressLabel", "swapCancelAndSave", "onWillSubmit", "onSubmit", "onCancel", "onReset", "onSuccess", "buttonRow", "id", "registerComponentApi", "itemLabelBreak", "itemLabelWidth", "itemLabelPosition", "keepModalOpenOnSubmit", "hideButtonRowUntilDirty"]);
+    var { formState, dispatch, initialValue = constants_1.EMPTY_OBJECT, children, style, className, enabled = true, cancelLabel = exports.defaultProps.cancelLabel, saveLabel = exports.defaultProps.saveLabel, saveInProgressLabel = exports.defaultProps.saveInProgressLabel, swapCancelAndSave, onWillSubmit, onSubmit, onCancel, onReset, onSuccess, buttonRow, id, registerComponentApi, itemLabelBreak = exports.defaultProps.itemLabelBreak, itemLabelWidth, itemLabelPosition = exports.defaultProps.itemLabelPosition, keepModalOpenOnSubmit = exports.defaultProps.keepModalOpenOnSubmit, hideButtonRowUntilDirty, hideButtonRow = exports.defaultProps.hideButtonRow, enableSubmit = exports.defaultProps.enableSubmit } = _a, rest = __rest(_a, ["formState", "dispatch", "initialValue", "children", "style", "className", "enabled", "cancelLabel", "saveLabel", "saveInProgressLabel", "swapCancelAndSave", "onWillSubmit", "onSubmit", "onCancel", "onReset", "onSuccess", "buttonRow", "id", "registerComponentApi", "itemLabelBreak", "itemLabelWidth", "itemLabelPosition", "keepModalOpenOnSubmit", "hideButtonRowUntilDirty", "hideButtonRow", "enableSubmit"]);
     const formRef = (0, react_2.useRef)(null);
     const [confirmSubmitModalVisible, setConfirmSubmitModalVisible] = (0, react_2.useState)(false);
     const requestModalFormClose = (0, ModalVisibilityContext_1.useModalFormClose)();
@@ -243,6 +257,22 @@ const Form = (0, react_2.forwardRef)(function (_a, ref) {
         onCancel === null || onCancel === void 0 ? void 0 : onCancel();
         void requestModalFormClose();
     });
+    const doValidate = (0, misc_1.useEvent)(() => __awaiter(this, void 0, void 0, function* () {
+        // Trigger validation display on all fields
+        dispatch((0, formActions_1.triedToSubmit)());
+        // Get validation results grouped by severity
+        const { error, warning } = (0, Validations_1.groupInvalidValidationResultsBySeverity)(Object.values(formState.validationResults));
+        // Prepare cleaned data
+        const cleanedData = cleanUpSubject(formState.subject, formState.noSubmitFields);
+        // Return validation result
+        return {
+            isValid: error.length === 0,
+            data: cleanedData,
+            errors: error,
+            warnings: warning,
+            validationResults: formState.validationResults,
+        };
+    }));
     const doSubmit = (0, misc_1.useEvent)((event) => __awaiter(this, void 0, void 0, function* () {
         var _a;
         /* console.log(`🚀 Form submit started`);
@@ -258,19 +288,19 @@ const Form = (0, react_2.forwardRef)(function (_a, ref) {
             return;
         }
         setConfirmSubmitModalVisible(false);
-        dispatch((0, formActions_1.triedToSubmit)());
-        const { error, warning } = (0, Validations_1.groupInvalidValidationResultsBySeverity)(Object.values(formState.validationResults));
-        if (error.length) {
+        // Use the extracted validation logic
+        const validationResult = yield doValidate();
+        if (!validationResult.isValid) {
             return;
         }
-        if (warning.length && !confirmSubmitModalVisible) {
+        if (validationResult.warnings.length > 0 && !confirmSubmitModalVisible) {
             setConfirmSubmitModalVisible(true);
             return;
         }
         const prevFocused = document.activeElement;
         dispatch((0, formActions_1.formSubmitting)());
         try {
-            const filteredSubject = cleanUpSubject(formState.subject);
+            const filteredSubject = validationResult.data;
             const canSubmit = yield (onWillSubmit === null || onWillSubmit === void 0 ? void 0 : onWillSubmit(filteredSubject));
             if (canSubmit === false) {
                 // --- We do not reset the form but allow the next submit.
@@ -352,18 +382,19 @@ const Form = (0, react_2.forwardRef)(function (_a, ref) {
         });
     });
     const cancelButton = cancelLabel === "" ? null : ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-part-id": PART_CANCEL_BUTTON, type: "button", themeColor: "secondary", variant: "ghost", onClick: doCancel, children: cancelLabel }, "cancel"));
-    const submitButton = (0, react_2.useMemo)(() => ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-part-id": PART_SUBMIT_BUTTON, type: "submit", disabled: !isEnabled, children: formState.submitInProgress ? saveInProgressLabel : saveLabel }, "submit")), [isEnabled, formState.submitInProgress, saveInProgressLabel, saveLabel]);
+    const submitButton = (0, react_2.useMemo)(() => ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-part-id": PART_SUBMIT_BUTTON, type: "submit", disabled: !isEnabled || !enableSubmit, children: formState.submitInProgress ? saveInProgressLabel : saveLabel }, "submit")), [isEnabled, enableSubmit, formState.submitInProgress, saveInProgressLabel, saveLabel]);
     (0, react_2.useEffect)(() => {
         registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
             reset: doReset,
             update: updateData,
+            validate: doValidate,
         });
-    }, [doReset, updateData, registerComponentApi]);
+    }, [doReset, updateData, doValidate, registerComponentApi]);
     let safeButtonRow = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: buttonRow || ((0, jsx_runtime_1.jsxs)("div", { className: Form_module_scss_1.default.buttonRow, children: [swapCancelAndSave && [submitButton, cancelButton], !swapCancelAndSave && [cancelButton, submitButton]] })) }));
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, react_1.createElement)("form", Object.assign({}, rest, { style: style, className: (0, classnames_1.default)(Form_module_scss_1.default.wrapper, className), onSubmit: doSubmit, onReset: doReset, id: id, key: formState.resetVersion, ref: formRef }),
                 (0, jsx_runtime_1.jsx)(ValidationSummary_1.ValidationSummary, { generalValidationResults: formState.generalValidationResults }),
                 (0, jsx_runtime_1.jsx)(FormContext_1.FormContext.Provider, { value: formContextValue, children: children }),
-                (!hideButtonRowUntilDirty || isDirty) && safeButtonRow), confirmSubmitModalVisible && ((0, jsx_runtime_1.jsx)(ModalDialogNative_1.ModalDialog, { onClose: () => setConfirmSubmitModalVisible(false), isInitiallyOpen: true, title: "Are you sure want to move forward?", children: (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "vertical", style: { gap: "0.5rem" }, children: [(0, jsx_runtime_1.jsx)(TextNative_1.Text, { children: "The following warnings were found during validation. Please make sure you are willing to move forward despite these issues." }), (0, jsx_runtime_1.jsx)(ValidationSummary_1.ValidationSummary, { generalValidationResults: formState.generalValidationResults, fieldValidationResults: formState.validationResults }), (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "horizontal", horizontalAlignment: "end", style: { gap: "1em" }, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", themeColor: "secondary", onClick: () => setConfirmSubmitModalVisible(false), children: "No" }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => doSubmit(), autoFocus: true, children: "Yes, proceed" })] })] }) }))] }));
+                !hideButtonRow && (!hideButtonRowUntilDirty || isDirty) && safeButtonRow), confirmSubmitModalVisible && ((0, jsx_runtime_1.jsx)(ModalDialogNative_1.ModalDialog, { onClose: () => setConfirmSubmitModalVisible(false), isInitiallyOpen: true, title: "Are you sure want to move forward?", children: (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "vertical", style: { gap: "0.5rem" }, children: [(0, jsx_runtime_1.jsx)(TextNative_1.Text, { children: "The following warnings were found during validation. Please make sure you are willing to move forward despite these issues." }), (0, jsx_runtime_1.jsx)(ValidationSummary_1.ValidationSummary, { generalValidationResults: formState.generalValidationResults, fieldValidationResults: formState.validationResults }), (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "horizontal", horizontalAlignment: "end", style: { gap: "1em" }, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", themeColor: "secondary", onClick: () => setConfirmSubmitModalVisible(false), children: "No" }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => doSubmit(), autoFocus: true, children: "Yes, proceed" })] })] }) }))] }));
 });
 Form.displayName = "Form";
 exports.FormWithContextVar = (0, react_2.forwardRef)(function ({ node, renderChild, extractValue, style, className, lookupEventHandler, registerComponentApi, }, ref) {
@@ -383,8 +414,8 @@ exports.FormWithContextVar = (0, react_2.forwardRef)(function ({ node, renderChi
                 });
             });
         };
-        return Object.assign(Object.assign({}, cleanUpSubject(formState.subject)), { update: updateData });
-    }, [formState.subject]);
+        return Object.assign(Object.assign({}, cleanUpSubject(formState.subject, formState.noSubmitFields)), { update: updateData });
+    }, [formState.subject, formState.noSubmitFields]);
     const nodeWithItem = (0, react_2.useMemo)(() => {
         return {
             type: "Fragment",
@@ -403,7 +434,7 @@ exports.FormWithContextVar = (0, react_2.forwardRef)(function ({ node, renderChi
         extractValue.asOptionalString(node.props._data_url);
     const itemLabelWidth = extractValue.asOptionalString(node.props.itemLabelWidth);
     const { cssProps: itemLabelWidthCssProps } = (0, layout_resolver_1.resolveLayoutProps)({ width: itemLabelWidth });
-    return ((0, jsx_runtime_1.jsx)(react_slot_1.Slot, { ref: ref, style: style, children: (0, jsx_runtime_1.jsx)(Form, { keepModalOpenOnSubmit: extractValue.asOptionalBoolean(node.props.keepModalOpenOnSubmit), itemLabelPosition: extractValue.asOptionalString(node.props.itemLabelPosition), itemLabelBreak: extractValue.asOptionalBoolean(node.props.itemLabelBreak), itemLabelWidth: itemLabelWidthCssProps.width, hideButtonRowUntilDirty: extractValue.asOptionalBoolean(node.props.hideButtonRowUntilDirty), formState: formState, dispatch: dispatch, id: node.uid, className: className, cancelLabel: extractValue(node.props.cancelLabel), saveLabel: extractValue(node.props.saveLabel), saveInProgressLabel: extractValue(node.props.saveInProgressLabel), swapCancelAndSave: extractValue.asOptionalBoolean(node.props.swapCancelAndSave, false), onWillSubmit: lookupEventHandler("willSubmit", {
+    return ((0, jsx_runtime_1.jsx)(react_slot_1.Slot, { ref: ref, style: style, children: (0, jsx_runtime_1.jsx)(Form, { keepModalOpenOnSubmit: extractValue.asOptionalBoolean(node.props.keepModalOpenOnSubmit), itemLabelPosition: extractValue.asOptionalString(node.props.itemLabelPosition), itemLabelBreak: extractValue.asOptionalBoolean(node.props.itemLabelBreak), itemLabelWidth: itemLabelWidthCssProps.width, hideButtonRowUntilDirty: extractValue.asOptionalBoolean(node.props.hideButtonRowUntilDirty), hideButtonRow: extractValue.asOptionalBoolean(node.props.hideButtonRow), enableSubmit: extractValue.asOptionalBoolean(node.props.enableSubmit), formState: formState, dispatch: dispatch, id: node.uid, className: className, cancelLabel: extractValue(node.props.cancelLabel), saveLabel: extractValue(node.props.saveLabel), saveInProgressLabel: extractValue(node.props.saveInProgressLabel), swapCancelAndSave: extractValue.asOptionalBoolean(node.props.swapCancelAndSave, false), onWillSubmit: lookupEventHandler("willSubmit", {
                 context: {
                     $data,
                 },

package/dist/scripts/src/components/Form/formActions.js

@@ -27,13 +27,14 @@ var FormActionKind;
     FormActionKind["SUBMITTED"] = "FormActionKind:SUBMITTED";
     FormActionKind["RESET"] = "FormActionKind:RESET";
 })(FormActionKind || (exports.FormActionKind = FormActionKind = {}));
-function fieldInitialized(uid, value, force = false) {
+function fieldInitialized(uid, value, force = false, noSubmit = false) {
     return {
         type: FormActionKind.FIELD_INITIALIZED,
         payload: {
             uid,
             value,
-            force
+            force,
+            noSubmit
         },
     };
 }