验证材料设计（对话）表格

Question

我在“材料设计”对话框的验证中遇到了一些问题。 尝试了很多不同的验证方式（引导程序），但实际上没有任何效果。任何人都有解决方案吗？

尝试了引导文档中的多种验证方式。

    <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>