IxButton with type="submit" does not accept a "form" attribute and thus can't be used in a modal footer.

[mak-dunkelziffer]

Prerequisites

• I have read the Contributing Guidelines.
• I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

What happened?

Angular: 19.0.6
Siemens IX: 2.6.1

The following (shortened) example for a "form inside the modal content, yet submit button in the model footer outside of the form" works with a regular <button>, by passing the form's id attribute to the button as form attribute.

<ng-template #createModal let-modal>
  <div>
    <ix-modal-header>Create Resource</ix-modal-header>
    <ix-modal-content>
      <app-create-form #createForm />
    </ix-modal-content>

    <ix-modal-footer>
      <ix-button outline (click)="modal.dismiss('dismiss')">
        Cancel
      </ix-button>

      <button type="submit" form="create-resource-form" class="btn btn-primary" (click)="submit(modal)">
        Submit
      </button>
    </ix-modal-footer>
  </div>
</ng-template>

However, due to the upcoming Bootstrap removal, we would prefer to not style the button ourselves (with btn btn-primary). We would prefer to just use the <ix-button> here. However, that doesn't allow a form attribute and therefore doesn't submit the form correctly.

Possible solution

Maybe it is sufficient to pass the form attribute from the <ix-button> along to the shadow DOM <button>.

What type of frontend framework are you seeing the problem on?

Angular

Which version of iX do you use?

v2.6.1

Code to produce this issue.

<ng-template #createModal let-modal>
  <div>
    <ix-modal-header>Create Resource</ix-modal-header>
    <ix-modal-content>
      <app-create-form #createForm />
    </ix-modal-content>

    <ix-modal-footer>
      <ix-button outline (click)="modal.dismiss('dismiss')">
        Cancel
      </ix-button>

      <button type="submit" form="create-resource-form" class="btn btn-primary" (click)="submit(modal)">
        Submit
      </button>
    </ix-modal-footer>
  </div>
</ng-template>

[danielleroux]

@mak-dunkelziffer Looks like it is possible to implement the behaviour of the html button (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#form) also for the ix-button. Any contribution is welcome to get the feature done faster, just let me know if you need some help.

[github-actions]

🤖 Hello @mak-dunkelziffer

Your issue will be analyzed and is part of our internal workflow.
To get informed about our workflow please checkout the Contributing Guidelines

JIRA: IX-2293

[github-actions]

Thank you for creating this issue! It has been labeled as Contribution welcome 👨‍💻. This issue is open for contributions from the community.

If you'd like to work on this issue, please comment here letting us know that you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.
Thank you!