I have implemented ng2-bs3-modal in my Angular 2 application. I am now looking for a way to clear all form fields when the close button is clicked. Can anyone suggest the best and easiest way to achieve this?
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.-]+\.[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>
</modal-body>
</modal>