在角度2中清除ng2-bs3-modal形式

Question

I am using ng2-bs3-modal in my angular 2 app. Now I want to clear all forms feilds to be clear with close button is click. how to do this in best and easy way.

html

 <button type="button" class="btn-u pull-right margin-bottom-10" (click)="modal.open()"><span class="fa fa-plus" aria-hidden="true"></span> Invite User</button> <modal #modal> <modal-header [show-close]="true"> <h4 class="modal-title">Invite User</h4> </modal-header> <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.-]+\\.[az]{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> </modal-body> </modal> 

Answer 1

Handle yout close button event and reinitialize the form object so you will do something like :

<button type="button" (click)="resetForm()" class="btn-u btn-u-default margin-right-5" data-dismiss="modal">Close</button>

and in your ts file :

resetForm(){
    this.inviteUser = new InviteUserForm(); // this will clear all fields in bound in html
}