I'm encountering an issue in my Angular10 project where a Bootstrap modal does not automatically close after a form submission

Question

The form submission itself is successful, but the modal remains open. Uniquely, my form's submit button is placed outside the tag, and I've tried using @ViewChild to programmatically close the modal, but to no avail.

I called this function after successfully submitting the data:

closePopUp() {
    this.submitted = false;
    this.referrersForm.reset();
    this.ReferrerPoliciesForm.reset();
    this.addContactDetailForm.reset();
    this.addNoteModalForm.reset();
    this.editMode = false;
    this.selectedFiles = [];
    this.renderFileList();    
}

Answer 1

// This function is called when the submit button is clicked
function saveData() {

  // Find the 'closeAddContactDetail' element in the DOM and cast it as an HTMLElement
  const closeContactButton = document.getElementById('closeAddContactDetail') as HTMLElement;

  // If the element is found, simulate a click on it
  if (closeContactButton) {
    closeContactButton.click();
  }

  // Add the rest of your save data logic here
}