web-dev-qa-db-ja.com

Angular 4：フォーム送信イベントの完了後にモーダルを閉じる

bootstrap 4 modalを使用しています。閉じるボタンを押すと、modalが正しく閉じます。しかし、フォームに存在する作成ボタンを送信した後、モーダルを閉じたいです。 angularを使用しています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>
angularbootstrap-modalbootstrap-4
4
K.MohanRaj

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

私には、ここにいくつかのオプションがあるようです。

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

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

2番目のオプションの場合は、それが何を意味するにせよ、プロジェクトにJQueryをインポートする必要があります。次に、次のようにJQueryでViewChildを使用できます。

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

コンポーネントからモーダルを閉じたい場合は、使用できます

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

または、sumbitボタンのタイプを「送信」からボタンに変更して、次のように使用できます。

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

これにより、モーダルが閉じ、同時に送信関数が呼び出されます。

1
Gautam

送信時にポップアップモーダルを閉じる簡単な方法はこれです

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

angularでは$の代わりにjQueryを使用します

declare var jQuery:any;

コンポーネントの次の行を閉じるために書きます

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

または

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