角4：フォーム送信イベントが終了した後、モーダルを閉じる

Question

私はブートストラップ4モーダルを使用しています。閉じるボタンを押すとモーダルが正しく閉じます。フォームに存在する作成ボタンを送信した後にモーダルを閉じたいと思っています。私はあなたに「提出」からsumbitボタンの種類を変更することができますが、コンポーネントからモーダルを閉じたい場合は、あなたが他の

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

を使用することができ、角度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> 

Answer 1

を使用していますボタンを押して次のように使用してください。

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

これはあなたのモーダルを閉じ、同時にあなたに送信機能を呼び出します。

Answer 2

私には2つのオプションがあります。

1.）データ作成を[作成]ボタンにも追加します。

2.）@ angular/coreとJQueryの@ViewChildを使用してモーダルへの参照を取得し、Createをクリックすると閉じることができます。

2番目のオプションでは、JQueryをプロジェクトにインポートする必要があります.JQueryはその意味を問わず使用できます。そして、あなたはこのようにjQueryを使ってViewChildを使用することができます。

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

Answer 3

あなたは角度を使用しているときにjQueryやその他の外部ライブラリを使用する必要はありません。必要なのは、フォームが送信されたときにイベントを発行するEventEmitterです。私が作ったこのサンプルコードで

ルック：

まず

<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); 
    } 
} 

モーダル

modal.component.htmlためのコード

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; 
    } 
    }