Подтверждение формы дизайна материалов (диалоговое окно)

Question

У меня возникли проблемы с проверкой диалога Material Design. Пробовал так много разных способов проверки (Bootstrap), но на самом деле ничего не работает. У кого-нибудь есть решение для этого?

Перепробовал много способов проверки из документации по начальной загрузке.

    <form>
        <div class="mdc-dialog mdc-dialog--open" role="alertdialog" aria-modal="true" aria-labelledby="my-dialog-title"
            aria-describedby="my-dialog-content">
            <div class="mdc-dialog__container">
                <div class="mdc-dialog__surface">

                    <div class="btn-group btn-group-top" role="group" aria-label="Third group">
                        <a class="d-flex align-items-center text-muted" @click="${() => this.emit('dialogCloseClick')}">
                            <iron-icon icon="vaadin:close-small" class="feather"></iron-icon>
                        </a>
                    </div>

                    <h1 class="mdc-dialog__title">
                        ${this.getHeaderTemplate}
                    </h1>

                    <div class="mdc-dialog__content" id="my-dialog-content">
                        <div class="row">
                            <div class="col">
                                <div class="form-label-group">
                                    <input type="text" id="companyName" class="form-control" placeholder="Nike" required
                                        autofocus value=${this.client.companyName}>
                                    <label for="companyName">Unternehmen</label>
                                </div>
                            </div>

                            <div class="col">
                                <div class="form-label-group">
                                    <input type="text" id="phoneNumber" class="form-control" placeholder="000000000000" required
                                        autofocus value=${this.client.phoneNumber}>
                                    <label for="phoneNumber">Telefon</label>
                                </div>
                            </div>
                        </div>

                        <div class="form-label-group">
                            <input type="email" id="email" class="form-control" placeholder="Email address"
                                autofocus value=${this.client.email}>
                            <label for="email">Email Addresse</label>
                        </div>
                    </div>
                    <footer class="mdc-dialog__actions">
                        <div class="btn-group">
                            ${this.getButtonTemplate}
                        </div>
                    </footer>
                </div>
            </div>
            <div class="mdc-dialog__scrim" @click="${(e: any) => this.emit('dialogCloseClick')}"></div>
        </div>
    </form>