Angular 4：表单提交事件完成后关闭模式答案

【问题标题】：Angular 4: Close modal after form submit event is finishedAngular 4：表单提交事件完成后关闭模式
【发布时间】：2018-04-16 03:22:39
【问题描述】：

我正在使用 bootstrap 4 模态。当我按下关闭按钮时，模态会正确关闭。但我想在提交表单中存在的创建按钮后关闭模式。我正在使用角度 4。

<div class="modal fade" id="createLabel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
 <div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">New project</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
   <form name="form"  (ngSubmit)="f.form.valid && newproject(createLabel)" #f="ngForm" novalidate >
      <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !projectname.valid }">
            <input type="text" class="form-control" placeholder="Your Project Title. Eg. Building Ark v1.0" name="projectname"  [(ngModel)]="createLabel.projectname"  minlength="3" #projectname="ngModel" required />
            <div *ngIf="f.submitted && !projectname.valid" class="help-block" style="color: red;">Atleast 3 charater</div>
            </div>
            <div class="form-group" >
               <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button [disabled]="loading" class="btn btn-primary" >Create</button> </div>
        </form>
  </div>

 </div>
</div>

【问题讨论】：

标签： angular bootstrap-modal bootstrap-4

【解决方案1】：

如果你想从组件中关闭模态，那么你可以使用

$("#createLabel").modal("hide");

否则，您可以将 sumbit 按钮的类型从“提交”更改为按钮，并按如下方式使用

<button type="button" (click)='onsubmit()' data-dismiss="createLabel">Create</button>

这将关闭您的模态并同时调用您的提交功能。

【讨论】：

【解决方案2】：

在我看来你有几个选择。

1.) 也将 data-dismiss 添加到您的 Create 按钮。

2.) 您可以使用 @angular/core 和 JQuery 中的 @ViewChild 来获取对模式的引用，然后单击“创建”即可将其关闭。

对于第二个选项，您必须将 JQuery 导入您的项目，无论这对您意味着什么。然后您可以像这样将 ViewChild 与 JQuery 一起使用：

@ViewChild('completeModal') completeModal: ElementRef;
$(this.completeModal.nativeElement).modal('hide');

【讨论】：

我已经尝试了第一个。但不行。请给我一个第二个的例子

【解决方案3】：

在使用 Angular 时，您不必使用 jQuery 或其他外部库。您所需要的只是一个EventEmitter，它会在提交表单时发出一个事件。

看看我做的这个代码示例：

首先是模态的代码

modal.component.html

<div>
   <h1>This is my modal</h1>
   <button (click)="onCloseModal($event)">Submit form</button>
</div>

modal.component.ts

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.scss']
})
export class ModalComponent {
  @Output() closeModalEvent = new EventEmitter<boolean>();

  constructor() { }

  onCloseModal(event: any){
   this.closeModalEvent.emit(false);  
  }
}

现在是父母的代码

parent.component.html

<div>
  <app-modal [modalVisible]="isVisible" (closeModalEvent)="onClose($event)"></app-modal>
  <button (click)="showModal()">open modal</button>
</div>

parent.component.ts

@Component({
      selector: 'app-parent',
      templateUrl: './parent.component.html',
      styleUrls: ['./parent.component.scss']
    })
    export class ModalComponent {
      modalVisible = false;

      constructor() { }

      onClose(isVisible: boolean){
       this.modalVisible = isVisible;
      }

      showModal(){
       this.modalVisible = true;
     }
    }

【讨论】：

【解决方案4】：

在 Angular 中使用 jQuery 而不是 $，因为您可以轻松识别

declare var jQuery:any;

在你的组件中写下下面的行

jQuery("#myModal").modal("hide");

或者

  jQuery('#addEditUserModal').modal('toggle');

【讨论】：

【解决方案5】：

在提交时关闭弹出模式的简单方法是这样

<a class="confirm" data-dismiss="modal" (click)="save()">Confirm</a>

【讨论】：

最简单的方法！

【解决方案6】：

在您的情况下同时也是最简单和最可靠的方法：

    <div class="modal fade" id="createLabel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
     <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New project</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
       <form name="form" #f="ngForm" novalidate >
          <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !projectname.valid }">
                <input type="text" class="form-control" placeholder="Your Project Title. Eg. Building Ark v1.0" name="projectname"  [(ngModel)]="createLabel.projectname"  minlength="3" #projectname="ngModel" required />
                <div *ngIf="f.submitted && !projectname.valid" class="help-block" style="color: red;">Atleast 3 charater</div>
                </div>
                <div class="form-group" >
                   <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button [disabled]="!f.form.valid" (click)="newproject(createLabel)" 
                       data-dismiss="modal" type="button" class="btn btn-primary" >Create</button> </div>
            </form>
      </div>
    
     </div>
    </div>

【讨论】：

【解决方案7】：

您可以在 .ts 文件中的 ngSubmit 函数内关闭模态

.ts 文件

(Submitfunction){   //function of modal submit button

    $('#mymodalname').modal('hide');

}

【讨论】：