Bootstrap 4模态在调用angular5 .reset（）之后不会关闭

Question

我已经坚持了两个小时，但由于许多示例已过时，因此我在网上找不到任何有用的信息。 我试图在按下Submit（）按钮后重置/清除表单。 这是我尝试过的一些方法：

1. this.memoForm.reset（）

   • 重置表单，但模式不会关闭

2. 重新分配表单组变量：

   this.memoForm = this.formBuilder.group（{title：[“”，Validators.required]，描述：[“”，Validators.required]，标签：[“”]}））;

   • 导致与1）相同的问题，模态不关闭

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

Answer 1

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

Bootstrap使用jquery添加了这种类型的功能，但是在某些时候无法有角度地添加其VE和CSS选择器，请尝试编写一个简单的示例，没有任何逻辑，只有简单的bootstrap示例，如果什么都没有发生，请尝试将您的https://angular.io/guide/component-styles#view-encapsulation更改为None，也许这会起作用。