Question

我已经被困在这两个小时了，我在网上找不到任何有用的东西，因为很多例子已经过时了。按下提交（）按钮后，我正在尝试重置/清除表单。以下是我尝试过的一些事情：

this.memoForm.reset（）
- 重置表单，但模式不会关闭
重新分配表单组变量：

this.memoForm = this.formBuilder.group（{ title：[“”，Validators.required]， description：[“”，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>

Answer 1

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

Bootstrap使用jquery来添加这种类型的功能，但是角度添加他们的VE和css选择器有时无法深入到你的组件中，尝试做一个简单的例子，没有任何逻辑，只有简单的bootstrap示例，如果没有发生了尝试将您的https://angular.io/guide/component-styles#view-encapsulation更改为无，这可能会有效。

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

1 个答案: