I have been working on creating a modal using Symfony 5 and Bootstrap 5. I want the form fields to be cleared when the modal is closed. Below are the relevant files. I am encountering an error when trying to close the modal: Uncaught TypeError: myModal.dispose is not a function. Any assistance would be greatly appreciated.
app.js
import './styles/app.scss';
// start the Stimulus application
import './bootstrap';
import { Tooltip, Toast, Popover, Modal} from 'bootstrap';
import clearModalFields from './js/clearModalFields.js'
clearModalFields.js
var myModal = document.getElementById('createButtonForm');
myModal.addEventListener('hide.bs.modal', function () {
myModal.dispose()
})
createButtonForm.html.twig
<body>
{{ form_start(formButton) }}
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createButtonForm">Create a Button</button>
<div class="modal fade" id="createButtonForm" tabindex="-1" aria-labelledby="createButtonFormLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="createButtonFormLabel">Create a Button</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label class="col-form-label">Label :</label>
{{ form_widget(formButton.label, {'attr': {'class': "form-control", 'autofocus': true}}) }}
{{ form_errors(formButton.label)}}
</div>
<div class="mb-3">
<label class="col-form-label">Link :</label>
{{ form_widget(formButton.link, {'attr': {'class': "form-control"}}) }}
</div>
<div class="mb-3">
<label class="col-form-label">Button Type :</label>
{{ form_widget(formButton.permissionType, {'attr': {'class': "form-control"}}) }}
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
{{ form_widget(formButton.submit, {'attr': {'class': "btn btn-primary"}}) }}
{{ form_widget(formButton._token) }}
</div>
</div>
</div>
</div>
<br><br>
{{ form_end(formButton) }}
</body>