未捕获的类型错误：Modal.dispose 不是一个函数 Bootstrap 5 Symfony 5.3答案

【问题标题】：Uncaught TypeError: Modal.dispose is not a function Bootstrap 5 Symfony 5.3未捕获的类型错误：Modal.dispose 不是一个函数 Bootstrap 5 Symfony 5.3
【发布时间】：2021-06-09 23:02:03
【问题描述】：

我正在使用 Bootstrap 5 在 Symfony 5 上制作模式。我希望在关闭模式时清理表单字段。这是我的文件。当我关闭模式时，我收到以下错误：未捕获的 TypeError：myModal.dispose 不是函数。感谢您的帮助

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">Créer un bouton</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">Créer un bouton</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></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">Lien :</label>
                    {{ form_widget(formButton.link, {'attr': {'class': "form-control"}}) }}
                </div>

                <div class="mb-3">
                    <label class="col-form-label">Type de bouton :</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">Annuler</button>
            {{ form_widget(formButton.submit, {'attr': {'class': "btn btn-primary"}}) }}
            {{ form_widget(formButton._token) }}
          </div>
        </div>
      </div>
    </div>
    <br><br>
  {{ form_end(formButton) }}
</body>

【问题讨论】：

标签： javascript symfony5 bootstrap-5

【解决方案1】：

getElementById 函数返回一个 Element 对象，实际上，它没有定义 dispose 函数。您需要的是一个Modal 对象，您可以通过调用getInstance() 来获取它。

import { Modal } from 'bootstrap';

var myModal = document.getElementById('createButtonForm');

myModal.addEventListener('hide.bs.modal', function () {
    Modal.getInstance(myModal).dispose()
})

【讨论】：

好的，我明白了，谢谢。我应用了更改，但现在我得到了一个 Uncaught TypeError: Cannot read property 'classList' of null。关闭模式时（它不能再关闭）。错误来自 Modal._isAnimated ：_isAnimated() { return this._element.classList.contains(CLASS_NAME_FADE$4); } 当我关闭模式时调用它。你知道为什么会这样吗？
@Clément.R 这看起来像bootstrap animation，但不知道它在哪里被调用。我还没有尝试过，但将hide.bs.modal 更改为hidden.bs.modal 可能会解决问题，因为这将等到动画完成才能销毁模态。
好的，我试试。感谢您的帮助！
你是在我的动画问题上为 hidden.bs.modal 写的 thx
Modal.getInstance(myModal) （我认为来自引导文档）返回一个空元素，因此 dispose 函数无法工作。我设法用它创建了我的模态的模态实例：`var modal = new Modal(document.getElementById('createButtonForm'), {});` 但是现在我仍然有一个问题，modal.dispose() 返回未定义。 ..