调用 angular5 .reset() 后，Bootstrap 4 模态不会关闭答案

【问题标题】：Bootstrap 4 modal does not close after calling angular5 .reset()调用 angular5 .reset() 后，Bootstrap 4 模态不会关闭
【发布时间】：2018-06-23 12:57:25
【问题描述】：

我已经坚持了两个小时，我在网上找不到任何有用的东西，因为许多示例都已过时。按下 submit() 按钮后，我正在尝试重置/清除我的表单。以下是我尝试过的一些事情：

this.memoForm.reset()
- 重置表单，但模式没有关闭
重新分配表单组变量：

this.memoForm = this.formBuilder.group({ 标题：[“”，Validators.required]，描述：[“”，Validators.required]，标签： [""] });
- 导致与1）相同的问题，模态不关闭
setPristine()
- 不是函数？

提交函数：

submit()  {
  if (this.memoForm.valid) {
    let data = {
      title: this.memoForm.value.title,
      description: this.memoForm.value.description
    };
    // send form 


    this.memoForm.reset();
  }
}

html:

  <form [formGroup]="memoForm" (ngSubmit)="submit(); memoForm.reset()" (keydown.enter)="submit()">
    <div class="form-group buffer-top">
      <label for="memoTitleInput">Title</label>
      <input type="text" formControlName="title" class="form-control" placeholder="Enter a title for your new item">
    </div>
    <div class="form-group">
      <label for="memoDescriptionInput">Description</label>
      <input type="text" formControlName="description" class="form-control" placeholder="Your memo">
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
      <button type="button" (click)="submit()" data-dismiss="modal" class="btn btn-primary" [disabled]="!memoForm.valid">Save</button>
    </div>  
  </form>

【问题讨论】：

你为什么不使用ng-boostrap。它专为角度而设计。经典的 boostrap 直接更新 DOM。无法通知 Angular。
您使用的是哪种模式？普通的引导模式或像 ng-bootstrap/ngx-bootstrap 这样的库？
@AshrafulIslam 普通引导模式。

标签： angular twitter-bootstrap typescript

【解决方案1】：

我认为您的组件范围（视图封装）存在问题。

Bootstrap 使用 jquery 添加此类功能，但是 Angular 添加它们的 VE 和 css 选择器有时无法深入到您的组件中，尝试制作一个简单的示例，没有任何逻辑，只有简单的引导示例，如果没有碰巧尝试将您的 https://angular.io/guide/component-styles#view-encapsulation 更改为 None，也许这会起作用。

【讨论】：