Open
Description
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>
Activity