Bootstrap 4 modal does not close after calling angular5 .reset()

Question

I have been stuck on this for two hours and I can't find anything helpful online as many of the examples are outdated. I'm trying to reset / clear my form after the submit() button is pressed. Here are some of the things that I have tried:

1. this.memoForm.reset()

   • resets the form, but the modal doesn't close

2. reassigning the form group variable:

   this.memoForm = this.formBuilder.group({ title: ["", Validators.required], description: ["", Validators.required], tags: [""] });

   • causes the same problem as 1), the modal does not close

3. setPristine()

   • not a function?

submit function:

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

I think that you have some problem with your component scope (view-encapsulation).

Bootstrap use jquery to add this type of functionalities, but angular add their VE and the css selector sometime can not reach deeply in your component, try to make one plain example, without any logic, only the simple bootstrap example, if nothing happen try to change your https://angular.io/guide/component-styles#view-encapsulation to None and maybe this will work.