web-dev-qa-db-fra.com

Comment puis-je fermer un modal dans Angular 2?

Je veux que l'utilisateur clique sur le bouton Soumettre et le modal se ferme automatiquement.

Si j'ajoute data-dismiss="modal" Dans Submit <button>, Il ne s'exécutera pas submitComments().

J'ai essayé de faire quelque chose comme $('#myModal').modal('hide');, mais sans y parvenir.

Alors, comment puis-je fermer un modal dans Angular 2? Merci

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>

<div id="myModal" class="modal fade">
     <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <form (ngSubmit)="submitComments()">
                    <div class="form-group row">
                        <label class="form-control-label col-sm-2">Comments:</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-default">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

.

submitComments() {
    // I want to do something like $('#myModal').modal('hide'); here.
}
angularbootstrap-modal
18
Hongbo Miao

Outre la réponse de @ MattScarpino, une autre alternative consiste à changer le type de votre bouton en button à partir de submit et à appeler votre fonction submitComments() tout en appelant dismiss-modal. en faisant cela, vous êtes en mesure de rejeter modal et d’appeler fonction en même temps, en espérant que cela puisse vous aider. voici l'exemple:

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>

<div id="myModal" class="modal fade">
     <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <form>
                    <div class="form-group row">
                        <label class="form-control-label col-sm-2">Comments:</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="button" (click)='submitComments()' data-dismiss="myModal" class="btn btn-default">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Mise à jour

si vous souhaitez fermer modal du côté de votre contrôleur, vous pouvez utiliser cette méthode

$("#myModal").modal("hide");
16
Pardeep Jain

Vous pouvez le faire en déclarant simplement la variable jQuery avec n’importe quel type dans le contrôleur Angular2.

declare var jQuery:any;

Ajoutez ceci juste après les instructions d'importation et avant le décorateur de composants.

Ensuite, accédez à bootstrap modal avec son identifiant identique à celui-ci).

jQuery("#myModal").modal("hide");
28
Devesh Jadon

Utilisation de @ViewChild

ajouter #closeBtn à l'élément avec data-dismiss="modal"

<a><i class="fa fa-close" data-dismiss="modal" #closeBtn></i></a>

Composant html

<div class="modal fade" id="yourModalId">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <a><i class="fa fa-close" data-dismiss="modal" #closeBtn></i></a>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>

utiliser this.closeBtn.nativeElement.click(); pour déclencher l'événement clic fermera votre modal.

Composant TypeScript

import {ViewChild, ElementRef} from '@angular/core';
@Component({
    moduleId: ...,
    selector: '.',
    templateUrl: '.',
    styleUrls: ['.']
})
export class yourClass {
    @ViewChild('closeBtn') closeBtn: ElementRef;

    yourFunction() {
        //do something
        ...
        ...
        //close your modal
        this.closeModal();
    }

    //call this wherever you want to close modal
    private closeModal(): void {
        this.closeBtn.nativeElement.click();
    }
}
26
Thang Le

Tout d'abord, définissez la propriété hidden du div sur une variable:

<div id="myModal" [hidden]="hideModal" class="modal fade">

Deuxièmement, dans la classe, définissez un booléen nommé hideModal et définissez-le sur false:

hideModal: boolean = false;

Troisièmement, dans submitComments(), définissez hideModal sur true.

4
MatthewScarpino

Réponse parfaite dans cet univers .........................

étape 1: donnez un identifiant unique au bouton de renvoi de modal

étape 2: après la soumission du formulaire ou l'appel de la tâche terminée

document.getElementById("addProductCloseButton").click();

dans votre classe

3
Pravash Raj Upreti

j'utilise une des réponses et avec quelques modifications de son travail parfaitement pour moi, j'espère que cela peut aider pour essayer de changer "your modal" en nom modal qui est votre cible, vous devriez utiliser le bouton Au lieu de i

<button hidden="hidden" class="fa fa-close" data-dismiss="modal" id="closeBtn" #closeBtn (click)="yourModal.close()"></button>

Composant html

<div style="margin-top: 0px !important;">
    <button type="button" id="openModal" #openModal class="btn btn-fab-mini btn-outline-primary" style="float:right" (click)="yourModal.open()"><strong>click here to open modal</strong></button>
    <modal #yourModal>
      <ng-template #modalHeader>
       <button hidden="hidden" class="fa fa-close" data-dismiss="modal" id="closeBtn" #closeBtn (click)="yourModal.close()"></button>
      </ng-template>
      <ng-template #modalBody>
        <yourmodalSelectorname></yourmodalSelectorname>
      </ng-template>
      <ng-template #modalFooter></ng-template>
    </modal>
  </div>

Manuscrit

import {ViewChild, ElementRef} from '@angular/core';

@Component({
moduleId: ...,
selector: '.',
templateUrl: '.',
styleUrls: ['.']})



yourFunction() {
    //do something
    ...
    ...
    //close your modal
    this.closeModal();
}

//call this wherever you want to close modal
private closeModal(): void {
    this.closeBtn.nativeElement.click();
}
2
Mehrdad

Essayez de ne pas inclure le formulaire dans votre corps modal. Ajoutez plutôt deux boutons identiques dans la section de pied de page.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span aria-hidden="true">&times;</span></button>
          </div>
          <div class="modal-body">
    <label class="form-control-label col-sm-2">Comments:</label>
                    <div class="col-sm-10">
                        <textarea class="form-control" rows="3"></textarea>
                    </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
            <button type="submit" class="btn btn-primary" >Save changes</button>
          </div>
        </div>
      </div>
    </div>
2
Marilynn

Je l'ai fait comme ça et ça marche parfaitement pour moi.

var element = document.getElementById("CloseButton") as any;

element.click();

Où mon CloseButton est bootstrap).

2
Kindlebit Net