J'ai un bouton, en cliquant sur lequel j'ouvre une pop-up modulaire de bootstrap. La fenêtre contextuelle modale contient du champ avec un bouton Soumettre. Je veux fermer la pop-up que lorsque j'ai fini d'enregistrer les données. Je ne peux pas utiliser de rejet de données car il fermera la fenêtre contextuelle juste après que l'utilisateur frappe le bouton. Existe-t-il un moyen de fermer la fenêtre contextuelle via Thypsecript?
Expense.component.html P>
<div id="AddExpense" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Expense</h4>
</div>
<div class="modal-body">
<form id="form" (ngSubmit)="saveExpense();">
<div class="form-group">
<table class="table table-responsive" style="border:0">
<tr *ngFor="#column of columnInputs" style="height:20px;">
<td class="text-right" style="padding-top:10px;border:0">
<h4> {{column.name | case}}: </h4>
</td>
<td class="text-center" style="padding-top:10px;border:0">
<input *ngIf="column.name != 'status'" type="{{column.name == 'created_Date' ? 'date' : 'text'}}" name="{{columns.name}}" required [(ngModel)]="column.value" class="form-control" />
<select class="form-control" *ngIf="column.name == 'status'" [(ngModel)]="column.value" name="{{column.name}}" required>
<option value="status">--Select--</option>
<option value="1">Paid</option>
<option value="2">Unpaid</option>
</select>
</td>
</tr>
</table>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg"> Add Expense </button>
</div>
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
3 Réponses :
Je ne suis pas sûr de ce que vous avez vraiment besoin de faire, mais si vous souhaitez fermer MODAL avec TypeScript, vous pouvez simplement donner un ID à votre méthode HTML modal et appelez la méthode "Masquer".
$('#newPostModal').modal('hide');
Typescript ne reconnaît pas $ symbole
Il suffit d'importer "déclarer var $: tout;"
$ est un sélecteur de jQuery. Il ne peut pas être déclaré comme une variable normale de type type. Même si je fais que cela n'aura pas la même fonctionnalité de pointeur que JQuery $
Vous pouvez importer jQuery à l'intérieur de l'angulaire 2 et utiliser toutes les fonctions ... Stackoverflow.com/Questtions/30623825/...
Cela masque modal code> mais ne change pas la couleur sombre de l'arrière-plan apparaît avec modal
Vous pouvez utiliser l'action sur le bouton Fermer et dans votre contrôleur, vous pouvez ajouter cette ligne après l'action que vous utilisez p> @ViewChild('closeAddExpenseModal') closeAddExpenseModal: ElementRef;
Je crois que cela devrait être la réponse acceptée car elle démontre la solution que l'OP recherche. De plus, c'est à mon avis la solution la moins invasive à ce problème (c'est-à-dire qu'elle ne nécessite pas de mélange dossier et javascript).
Pour référence, si vous souhaitez suivre une autre, le lien ci-dessous peut vous aider à vous aider. Stackblitz.com/edit/angular- Close-bootstrap-modal? Fichier = SRC / A PP / ...
Merci @rao ça marche. Et aussi merci par exemple que vous avez partagé.
avec votre identifiant = "addexpense", vous pouvez fermer le modal avec le code ci-dessous n'importe où dans votre documentation. P>
document.getElementByID ('addexpense'). Cliquez sur (); CODE> // Où vous souhaitez rejeter votre modal P>
Je pense que vous seriez mieux avec une implémentation angular2 d'un modal. Jetez un coup d'œil à ceci: Github.com/pleerock/ng2-modal
Dupliqué possible de Ng2-bootstrap show / masquer modal comme composant enfant a >