web-dev-qa-db-fra.com

Angular 4: Fermer le mode une fois l'événement d'envoi du formulaire terminé

j'utilise bootstrap 4 modal.quand j'appuie sur le bouton de fermeture, le modal se ferme correctement. mais je veux fermer le modal après avoir soumis le bouton de création présent dans le formulaire. j'utilise 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

Vous n'avez pas besoin d'utiliser jQuery ou d'autres bibliothèques externes lorsque vous utilisez Angular. Tout ce dont vous avez besoin est un EventEmitter qui émet un événement lorsque le formulaire est soumis.

Regardez cet exemple de code que j'ai fait:

D'abord le code du modal

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

Maintenant, le code du parent

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

Il me semble que vous avez deux options ici.

1.) Ajoutez également le rejet de données à votre bouton Créer.

2.) Vous pouvez utiliser @ViewChild à partir de @ angular/core et JQuery pour obtenir une référence au modal, puis cliquez sur Créer pour le fermer.

Pour la deuxième option, vous devrez importer JQuery dans votre projet, quoi que cela signifie pour vous. Ensuite, vous pouvez utiliser ViewChild avec JQuery comme ceci:

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

Si vous souhaitez fermer le modal du composant, vous pouvez utiliser

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

Sinon, vous pouvez changer le type de bouton sumbit de "soumettre" en bouton et utiliser comme suit

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

cela fermera votre modal et vous appellera en même temps soumettre la fonction.

1
Gautam

le moyen le plus simple de fermer le popup modal lors de la soumission est le suivant:

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

Dans angular utilisez jQuery au lieu de $ car vous pouvez facilement identifier

declare var jQuery:any;

Pour fermer, écrivez la ligne ci-dessous dans votre composant

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

Ou

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