10
votes

Fermer Bootstrap Modal en utilisant TypoScript dans Angular 2

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">&times;</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>


2 commentaires

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


3 Réponses :



16
votes

Vous pouvez utiliser l'action sur le bouton Fermer xxx pré>

et dans votre contrôleur, vous pouvez ajouter cette ligne après l'action que vous utilisez p> xxx pré> Vous devrez ajouter ces importations à votre contrôleur P>

@ViewChild('closeAddExpenseModal') closeAddExpenseModal: ElementRef;


3 commentaires

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é.



1
votes

avec votre identifiant = "addexpense", vous pouvez fermer le modal avec le code ci-dessous n'importe où dans votre documentation.

document.getElementByID ('addexpense'). Cliquez sur (); // Où vous souhaitez rejeter votre modal


0 commentaires