提交表单时Angular 11关闭引导模式答案

【问题标题】：Angular 11 close bootstrap modal when submitting the form提交表单时Angular 11关闭引导模式
【发布时间】：2021-03-10 08:21:00
【问题描述】：

我正在使用 angular 11。在我的应用程序中，我需要在单击提交按钮后关闭模式。尝试在提交按钮上使用 data-dismiss="modal"，但它忽略了我的 onSubmit 方法的逻辑。

这是我的模态

        <div class="container">
          <div>
              <form [formGroup]="FormData" (ngSubmit)="onSubmit(FormData.value)">
                <div class="form-group">
                  <input class="form-control" name="userName" placeholder="User name" formControlName="userName" required>
                </div>
                <div *ngIf="FormData.controls.userName.invalid && (FormData.controls.userName.dirty || FormData.controls.userName.touched)"
                     class="alert alert-danger">
                  <div *ngIf="FormData.controls.userName.errors.maxlength">
                    Maximum length should be 256 characters
                  </div>
                  <div *ngIf="FormData.controls.userName.errors.required">
                    Name is required.
                  </div>
                </div>

                <div class="form-group">
                  <input type="email" class="form-control" name="email" aria-describedby="emailHelp" placeholder="Enter email"
                         formControlName="email" required>
                  <div *ngIf="FormData.controls.email.invalid && (FormData.controls.email.dirty || FormData.controls.email.touched)"
                       class="alert alert-danger">
                    <div *ngIf="FormData.controls.email.errors.required">
                      E-mail is required.
                    </div>
                    <div *ngIf="FormData.controls.email.errors.email">
                      Email should be correct
                    </div>
                  </div>
                  <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                </div>

                <div class="form-group">
                  <textarea class="form-control" formControlName="message" name="message"></textarea>

                  <div *ngIf="FormData.controls.message.invalid && (FormData.controls.message.dirty || FormData.controls.message.touched)"
                       class="alert alert-danger">Maximum length should be 1000 characters
                  </div>
                </div>
                <div class="modal-footer">
                  <button type="submit" class="btn btn-primary">Save changes</button>
                </div>
              </form>
          </div>
        </div>

      </div>

【问题讨论】：

标签： javascript angular twitter-bootstrap

【解决方案1】：

您的模态似乎缺少一个开始：

<div class="modal" tabindex="-1" role="dialog" [style]="{'display':display}">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form [formGroup]="form" (ngSubmit)="onSubmit()">

我使用 bootstrap 样式但没有 bootstrap js。因此，额外的[style]="{'display':display}" 部分。在 Typescript 中，我将其与以下内容相匹配：

    onSubmit() {
        this.display='none'

更改样式会关闭模型。根据您的环境，这可能/可能不适合您。

【讨论】：