模态事件不起作用2

Question

我正在尝试使用其事件隐藏模态时清除表单值但它不起作用我正在引用所有必需的文件，但它不会触发。下面我附上我客户端的代码。我在我的角度2应用程序中使用它作为组件。

HTML

<script src="../../../Scripts/bootstrap.min.js"></script>
<script src="../../../Scripts/jquery-2.2.0.min.js"></script>

<script>
    $('#myModal').on('hidden.bs.modal', function () {
        $(this).find('form')[0].reset();
    });
</script>



<button type="button" class="btn-u pull-right margin-bottom-10" data-toggle="modal" data-target="#myModal"><span class="fa fa-plus" aria-hidden="true"></span> Invite User</button>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Invite User</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id='myForm' role="form" [ngFormModel]="InviteUserForm">
                    <div class="input-group margin-bottom-20">
                        <span class="input-group-addon"><i class="fa fa-user"></i></span>
                        <input type="text" [(ngModel)]='inviteUser.username' class="form-control" ngControl="username" required>
                    </div>

                    <div class="input-group margin-bottom-20">
                        <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                        <input type="email" required [(ngModel)]='inviteUser.email' class="form-control" ngControl="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
                    </div>

                    <div class="input-group margin-bottom-20">
                        <span class="input-group-addon"><i class="fa fa-glass"></i></span>
                        <select [(ngModel)]='inviteUser.partnerId' class="form-control" ngControl="partner" required>
                            <option>Select one</option>
                            <option *ngFor="let partner of _partners" value={{partner.Id}}>
                                {{partner.Name}}
                            </option>
                        </select>

                    </div>

                </form>
                <button type="button" class="btn-u btn-u-default margin-right-5" data-dismiss="modal">Close</button>
                <button type="button" [disabled]="!InviteUserForm.valid" class="btn-u pull-right" (click)="Invite(inviteUser)" data-dismiss="modal">Invite</button>
            </div>

        </div>
    </div>

</div>

Answer 1

您可以将angular2 bootstrap模式用作https://github.com/dougludlow/ng2-bs3-modal。您可以将此插件导入到项目中。

Answer 2

使用此代码

constructor() {
  this.activate();
}

activate() {

  ////This event is fired immediately when the hide instance method has been called.
  ///called to reset the events and the headers.
  $('#myModal').on('hidden.bs.modal', function () {
    ////debugger;
    // do your work over here
    console.log("modal is closed hidden");
  })


  ////This event is fired when the modal has finished being hidden from the   user (will wait for css transitions to complete).
  ///called to reset the events and the headers.
  $('#myModal').on('hide.bs.modal', function () {
    ////debugger;
    // do your work over here;

    console.log("modal is closed hide");
  })
}