Clarity: A form inside of Modal prevents modal body rendering.

Created on 2 Feb 2017 · 3Comments · Source: vmware/clarity

[ ] bug
[ ] feature request
[x] enhancement

Hi!
I use a form inside of Modal control (Angular2).
But form tag prevents of Modal body rendering in case if the tag is outside of modal-body block.
Expected: to be able to put

wontfix

Source

vzayko

Most helpful comment

This is expected, we require the different pieces to be direct children of the modal so we can split them and project them in the right place.

In your case, there are two solutions: either put the <form> element inside the modal body itself, or put it completely around the modal like so: <form><clr-modal>...</clr-modal></form>.
The first one is simpler if you just need the form to wrap the body, the second is needed when the buttons in your footer are also part of the form.

youdz on 2 Feb 2017

👍3

All 3 comments

This is expected, we require the different pieces to be direct children of the modal so we can split them and project them in the right place.

youdz on 2 Feb 2017

👍3

Hi @vzayko!
Sorry, if it is not actual for you already, but I found this question on SO:
https://stackoverflow.com/questions/38054631/angular2-validate-and-submit-form-from-outside

According to it there are two ways to solve this problem.

1) Associate button with form via HTML attribute form e.g.:

<form id="myForm" [formGroup]="form" (ngSubmit)="onSubmit()">
...
</form>
<button type="submit" form="myForm">Submit</button>

This solution does not working in IE and Edge less than 16:
https://caniuse.com/#search=form%20attribute

2) Emit submit event when clicking on button:

<form #myForm="ngForm" [formGroup]="form" (ngSubmit)="onSubmit()">
...
</form>
<button type="submit" (click)="myForm.ngSubmit.emit()">Submit</button>

belyan on 6 Jul 2018

👍1

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.