以角度2清除ng2-bs3模态形式

Question

我在我的角度2应用程序中使用ng2-bs3-modal。现在我想要清除所有表格，用关闭按钮点击清楚。如何以最好和最简单的方式做到这一点。

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>

Answer 1

处理关闭按钮事件并重新初始化表单对象，以便执行以下操作：

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

并在您的ts文件中：

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